jQuery Masonry

ボックスをタイル状に並べ、ウィンドウサイズに合わせて並べ替え・アニメーションするプラグイン

配布サイト:http://masonry.desandro.com/
参考サイト:http://www.webantena.net/javascriptjquery/jquery-plugin-masonry/
参考サイト:http://www.koikikukan.com/archives/2012/10/19-015555.php

【設置例】
HTML

<div id="container" class="clearfix">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box box_l"></div>
</div>

CSS

.box {
  width: 200px;
  margin: 5px;
  padding: 0px;
}
.box_l {
  width: 410px!important;
  margin: 5px;
  padding: 0px;
}

プラグイン呼び出し

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

注意すべきはcolumnWidthの数字。入れないと動かないが、適切な数字を入れないとやはり動かない。
基本的には、「一番小さいボックスの横幅」を入れる形になる。
サンプルだと、width⇒200、margin⇒5+5で合計210pxが一番小さい幅となる。
小さいボックス2つぶんの大きさのボックスを入れる際には、210*2=420pxからmargin10px分を引いて410pxのwidthと設定する。