on:2012年8月22日sponsorsページ上のさまざまなエレメントをブロックに変換し、グリッドに沿って配置するjQueryのプラグインを紹介します。ブラウザのサイズを変更するとアニメーションで配置を変更する機能はよく見かけますが、他にもリロードする度にランダムに配置を変更することもできます。BlocksIt.jsBlocksIt.jsのデモBlocksIt.jsの使い方BlocksIt.jsのデモデモは2種類あります。リロードする度にランダムに配置を変更するのから。1リロードすると、レイアウトは幅7カラム分の制限でランダムに配置を変更します。続いて、Pinterest風デザインのデモ。2こちらはブラウザのサイズを変更すると、それぞれのマージンを維持しつつ配置を変更します。外部ファイル「jquery.js」と当スクリプトをhead内に記述します。※jQueryは1.7.1で開発。HTMLHTMLは対象となる範囲をラッパーで包み、各パネルを同列に配置します。パネルはデフォルトでdiv要素を対象にしていますが、任意の要素で実装できます。JavaScriptjQueryのセレクタでラッパーを指定し、スクリプトを実行します。$('#objectID').BlocksIt();});スクリプトのオプションオプションではレイアウトのルールを設定します。‘div’)ブロックに変換するエレメント※デフォルトはdiv要素で、任意のclassをブロックに変換することもできます。オプションを使用すると、下記のようになります。