[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とCSS

並び変えしたい要素を記述し、CSSで各ブロックをデザインします。

jQuery masonry Option

オプションを加えると、ぬるっと動いたり色々できてかっこよくなります。

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