隙間なくブロック要素を敷き詰めたい時は、jquery masonryの出番

隙間なくブロック要素を敷き詰めたい時は、jquery masonryが便利。実はInfinite Scrollと組み合わせて、無限スクロールができたりとかいろいろ機能が豊富。

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”jquery.masonry.min.js”></script>

で、スクリプトを読み込んでから、指定はこんな感じ。 jqueryのバージョンは1.7じゃなくても1.3ぐらいでも動いてたので、どれでも大体動くと思う。

$(‘対象の要素’).masonry({
itemSelector : ‘.box’,
columnWidth : 320,
isFitWidth: true
});

基本は、リサイズに反応して、要素を再配置してくれるんだけど、クリックとかなんとかで要素の大きさがかわったりしても無視される。

そういう時は、reloadメソッドを使えば、好きなタイミングで再構築できる。指定方法はこんな感じ。

$(“対象の要素”).masonry( ‘reload’ )

オンクリックでブロック要素の出たり消えたりするとしたら、

$(“.left_img”).css(“cursor”, “pointer”).click(function(){
$(this).next().slideToggle(“fast”,function(){$(“対象の要素”).masonry( ‘reload’ );});
});

という感じで、コールバック関数として呼ぶ形で指定すればOK。

注意点としては、画像の大きさを指定していなかったりする場合は、DOM構築完了時には、ブロックの大きさが確定していない。その場合は、うまく配置ができない。その場合

jQuery.event.add(window, “load”, function(){ $(‘対象の要素’).masonry(‘reload’) });

みたいな形で、loadイベントでリロードさせるか、最初のmasonryをloadイベントで動かすかの方法をとる必要がある。