[JS]パネルを新聞のように隙間なく自動で配置するスクリプト -Masonry

div要素で実装したパネルを新聞や雑誌のように隙間なく自動で配置するスクリプトを紹介します。

Masonry
demo

レイアウトの指定は簡単で、上記のようなレイアウトを作成するには各カラムの幅を指定します。

$(function(){
    $('#wrapper').masonry({ columnWidth: 200 });
});

カラムごとに異なる幅を指定することも可能です。

demo (Tumblelog)

また、ユーザーのスクロール操作に合わせてコンテンツを表示する「Infinite Scroll」にも対応しています。

demo (Infinite Scroll)

ブラウザのサイズ変更にも柔軟に対応しています。

ブラウザのサイズを変更

MasonryはjQueryのプラグインのため、実装にはjquery.jsが必要です。

ライセンスはGPLとMITで、個人・商用ともに無料で利用できるとのことです。

Post on:2009年12月9日