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>
.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と設定する。