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

[jQuery]自動並び変えプラグインjQuery masonryの設定方法・オプションまとめ

リストなどでfloatして横並びしたいとき、高さが違う要素が含まれるとキレイにならびません。
そこで役立つ便利なプラグインjQuery masonryをまとめてみた。
ちなみにMasonryとは、和訳すると「石造建築」。
レンガ造りの壁とかをイメージしてもらえると分かりやすいのかな?

jQuery masonryの使い方

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

まずはjQueryライブラリファイルと、jQuerymasonry本体をDL。
jQuery
jQuery masonry

jsファイルを読み込み

headタグ内に、DLしたJSファイルの読み込みを記述する。

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

続けて、どこかに以下のソースを記述。head内でもOK

<script>
  $(function(){
    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 200 //一列の幅サイズを指定
    });
  });
</script>

HTML

並び変えしたい要素を記述。

<h1>サンプル  シンプル版</h1>
<div id="container" class="centered">
  <div class="box col2"></div>
  <div class="box col2"></div>
  <div class="box col2"></div>
</div>

CSS

各ブロック要素をデザインする。

.centered { margin: 0 auto; }
#container{
    border:1px solid #dadada;
}
.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    float: left;
}
.col2 { width: 180px; }
.col4 { width: 380px; }

JS

上にも書いたけど大事なことなので2回言います。

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
  $(function(){
    $('#container').masonry({
      itemSelector: '.box',
      columnWidth: 200 //一列の幅サイズを指定
    });
  });
</script>

サンプルページ
実にシンプルな作りだけど、ウィンドウサイズに合わせて要素が並び変わる動きができた。

jQuery masonry Option

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

オプション設定

  $(function(){
    
    $('#container').masonry({ //親要素のクラスを指定
      itemSelector: '.box', //整理される要素のclassを指定
      columnWidth: 200, //一列の幅サイズを指定
      isAnimated: true, //スムースアニメーション設定
      isFitWidth: true, //親要素の幅サイズがピッタリ
      isRTL: false,     //整理される要素が左右逆になる(読み言語などに)
      gutterWidth: 0,   //整理される要素間の溝の幅を指定
      containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる
      isResizable: true //ウィンドウサイズが変更された時に並び替え
    });
    
  });

「itemSelector」は必須。
個人的には、「columnWidth」と「isAnimated」と「isFitWidth」を設定しておけば、良い感じになってくれると思うわけです。

サンプル2 gutter設定
サンプル3 スムース移動パターン1
サンプル4 スムース移動パターン2

サンプル4ではModernizr.jsというプラグインも使用している。
サンプル3と動きの違いが分かりにくいが、アニメーションに対応してないブラウザで対応させようってやつっぽい。
あまりうまく説明できないので、本家サイトでがんばって訳してみて下さい。