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

Post on:2009年12月9日

sponsors

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

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

<textarea name="code" class="js" cols="60" rows="5">
$(function(){
    $('#wrapper').masonry({ columnWidth: 200 });
});
</textarea>

$(function(){

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

});

</textarea>

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

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

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

ブラウザのサイズを変更

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

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