masonryは高さの違うブロックをなるべく隙間なく埋めて表示するためのjavascriptです。
とくに、画像やtwitterのタイムラインの表示などをしたいときに非常に便利です。
しかし、下部分がなぜかはみ出てしまうことが何度かありました。
原因は、画像の読み込みにあります。
各ブロックはposition: absolute; で表示されます。
表示時に各ブロックの高さを自動計算して親ブロックの高さが決まるのですが、その時に画像が読み込まれていないと
計算に問題が出ます。
固定ブロックであれば、imgタグの属性値でサイズを指定すればＯＫですが、外部から読み込む際は問題があります。
実は、公式にその問題を解決するスクリプトがすでにあります。
Masonry PACKAGEDをつかえばＯＫです。
使い方はいたって簡単で
直接masonryにリロードをかけるのではなく。。
$("#masonry").imagesLoaded(function(){
$(this).masonry('reload');
});
というような感じにしてimagesLoaded()のコールバックで画像が読み込まれた後に更新をかければＯＫです。
