jQuery『Masonry』で画像同士が重なって表示されてしまう問題の解決法

jQuery『Masonry』で画像同士が重なって表示されてしまう問題の解決法

こんにちわ。昨日ボルダリングに初挑戦しました。初心者用のコースは登れましたが、中級者向けになるとやはり無理ですね。小学生が軽々登っていて驚きました。久々に頑張ったので両腕が筋肉痛のTAKA(@web_creativelab)です。

さて、本日はjQuery『Masonry』で画像同士が重なって表示されてしまう問題について簡単な解決法をご紹介します。
なお、既に『Masonry』を導入済みの方向けの記事となりますので『Masonry』についての説明は省かせていただきます。
導入方法については詳しく説明してくれている方がいるので以下のリンク先をご参照くださいませ。

tabshttp://www.webdesignleaves.com/wp/jquery/1340/

解決法

『Masonry』の重なりを解決する方法は、JavaScriptを以下のコードのように少し修正するだけです。

HTML

  • 画像1
  • 画像2
  • 画像3

JavaScript

変更前

<script>
jQuery(function(){
    jQuery( '.itemList' ).masonry({
        itemSelector: '.item',
    });
});
</script>

変更後

<script>
jQuery(window).load(function(){
    jQuery( '.itemList' ).masonry({
        itemSelector: '.item',
    });
});
</script>

さいごに

重なってしまう原因は画像を全て読み込む前に画像の高さを『Masonry』が計算してしまう為に問題が発生します。
そのため、今回は画像を全て読み込んでから『Masonry』が計算するような処理に修正しています。

以上『Masonry』が重なって表示されてしまう場合は上記の方法を試してみてください。