bootstrapとjquery.masonry.jsを使って、レンガ状(pinterest風)にサムネイルを並べていく

最近流行りのbootstrapを使うとすごく簡単にレスポンシブルなサイトを作る事が出来る。
特に自分みたいなエンジニア系のweb制作者にとってはbootstrap使う事によってデザインを整えられるし、
何よりも最大12カラムのグリッドシステムがすごく便利。

だけどグリッドシステムを使ってサムネイルを並べたときなどにそれぞれの高さが変わってしまうと不格好になってしまう。
なのでこれを解決するためにmasonryを使ってグリッドシステムをさらに綺麗に表示することにしてみた。

// html
<script src="/js/jquery-1.8.2.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.masonry.min.js"></script>

<ul class="thumbnails">
  <li class="span3">
    <div class="thumbnail">
      <img src="hoge.jpg">
      <p>honyahonyahonyahonyahonyahonya</p>
    </div>
  </li>
  <li class="span3">
    <div class="thumbnail">
      <img src="hoge.jpg">
      <p>honyahonya</p>
    </div>
  </li>
  <li class="span3">
    <div class="thumbnail">
      <img src="hoge.jpg">
      <p>honyahonyahonyahonyahonyahonyahonyahonyahonyahonya</p>
    </div>
  </li>
  <li class="span3">
    <div class="thumbnail">
      <img src="hoge.jpg">
      <p>honyahonya</p>
    </div>
  </li>
</ul>

// js
$(function(){
  var $container = $('.thumbnails');
  $container.imagesLoaded( function(){
    $container.masonry({
      itemSelector : '.span3'
    });
  });

  $(window).resize(function(){
    $container.masonry({itemSelector : '.span3'});
  });
});

resizeイベントを使用しているのはウィンドウサイズを変えた際に綺麗に表示されないため。
これでちゃんとレンガ状というかpinterest風にサムネイルが並ぶ。
ちなみにliの中にdivを入れる形でないとちゃんと表示されないので要注意。

すごく便利なbootstrap。
こういった細かい機能も含んでくれるようになるとすごく便利だなぁと思うし、
面倒な事も少なくなるのになって感じ。