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

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

jQuery masonryの使い方

JSファイルをダウンロード

jQueryライブラリファイルと、jQuerymasonry本体をDLしてください。

jsファイルを読み込み

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

HTML

<div id="container" class="centered">
 <div class="box"></div>
 <div class="box"></div>
</div>

CSS

.box { float: left; margin: 5px; }