jQuery MasonryでPinterest風グリッドデザインを実現する

Pinterest風レイアウトのイメージ

Pinterest風のグリッドデザインを実現するjQueryプラグイン、jQuery Masonryが便利だったのでご紹介します。
写真のギャラリー表示や小さなサイズ違いのブロックを敷き詰めて表示したい際にリクエストされることがあるのですが、このデザインは自分でjsを組むと要件定義を含めなかなか大変です。
実装は簡単なので早速ご紹介します。

jQuery Masonryの実装

導入まで

必要なファイルを公式サイトからダウンロードします。
jsの読み込みをとmasonry用のコードを記述します。htmlとjsのサンプルを以下に記述します。

htmlの記述

  <div id="container">
  <div class="item"><img src="images01.jpg" alt=""></div>
  <div class="item"><img src="images02.jpg" alt=""></div>
  <div class="item"><img src="images03.jpg" alt=""></div>
  ～ 以下略 ～
  </div>

jsの記述

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.masonry.min.js"></script>
  <script>
    $(function(){
      $('#container').masonry({	//要素を敷き詰めるブロックのidやclassを指定します。
        itemSelector : '.item'	//敷き詰める要素のclassを指定します。
      });
    });
  </script>

cssの記述（必須要素のみ）

  .item {
    width: 200px;
    float: left;
  }

要素を敷き詰めるブロックを#container、要素を.itemとして記述しています。float: left;が必要なことに注意しましょう。

オプション項目

itemSelector

必須のオプションになり、これによって敷き詰める要素を指定します。要素のサイズはcssで指定可能です。

gutter

要素と要素の隙間をピクセル単位で指定します。

horizontalOrder

要素の折返しルールを指定します。デフォルトはfalseで高さを基準に上に詰められれば列を無視して敷き詰められます。
trueに指定するとブロックの高さに関わらず、要素は左から右に一行づつ敷き詰められます。

destroy

masonryを解除したいときに使用します。レスポンシブサイトなどで表示を切り替えたいときはこの記述が必要です。
記述例は以下です。

  <script>
     $(function(){
       var w = $(window).width();
       var x = 640;
       if (x >= w) {
         $('#container').masonry('destroy');
       }
     });
  </script>