[JS]パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry
Post on:2009年12月9日
div要素で実装したパネルを新聞や雑誌のように隙間なく自動で配置するスクリプトを紹介します。
![デモのキャプチャ](/wp-content/uploads-2009-2d/2009120907.png)
レイアウトの指定は簡単で、上記のようなレイアウトを作成するには各カラムの幅を指定します。
1 2 3 4 5 |
<textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#wrapper').masonry({ columnWidth: 200 }); }); </textarea> |
カラムごとに異なる幅を指定することも可能です。
![デモのキャプチャ](/wp-content/uploads-2009-2d/2009120908.png)
また、ユーザーのスクロール操作に合わせてコンテンツを表示する「Infinite Scroll」にも対応しています。
![デモのキャプチャ](/wp-content/uploads-2009-2d/2009120909.png)
ブラウザのサイズ変更にも柔軟に対応しています。
![デモのキャプチャ](/wp-content/uploads-2009-2d/2009120910.png)
ブラウザのサイズを変更
MasonryはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors