jQuery:Masonryで画像が重なるときの対処方

2月 3rd, 2015

最近よく使うjQueryライブラリの[Masonry]、ウィンドウサイズによって画像が上手い具合に並んでくれるのでリッチコンテンツっぽいです。

実際の設置方法はこの辺

で、設置してみたはいいけどページ読み込んだら画像が重なって表示されウィンドウサイズを変更すると正しい表示に戻る。という不具合がでました。
使ってる画像が重いのかなぁなんて思っていたんですが、単純に読み込み順の問題だったようです。

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

普通↑のようなスクリプトを書くと思うんですが、これだと問題の現象が発生します。

jQuery.event.add(window,"load",function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200 //一列の幅サイズを指定
});
});
というように全読み込みが終わったら実行するというように変更することで問題を回避できます。

カテゴリー: web

タグ: , Leave a comment

Leave a comment

Feed

http://www.browncrown.net/blog / jQuery:Masonryで画像が重なるときの対処方