[jQuery]自動整列プラグインjQuery masonryの設定方法・オプションまとめ

リストなどでfloatして横並びしたいとき、高さが違う要素が含まれるとキレイにならびません。
そこで役立つ便利なプラグインjQuery masonryをまとめてみた。

jQuery masonryの使い方

JSファイルを読み込み

<script src="jquery.js"></script>
<script src="jquery.masonry.min.js"></script>

JavaScript

$(function(){
 $('#container').masonry({
 itemSelector: '.box',
 columnWidth: 200
 });
});

jQuery masonry Option

$('#container').masonry({
 itemSelector: '.box',
 columnWidth: 200,
 isAnimated: true,
 isFitWidth: true
});