Masonryを使う際にわりと大事なimagesLoadedプラグイン＠jQuery

jQuery Masonryを使っている場合、このメソッドの実行前に画像をすべて読み込んでおくようにしておいたほうがよかったりする。と思います。たぶん。

自分がやってみたものだと、これをしてないとSafariやChrome（webkit系ブラウザ）で、たまにボックス（タイリングさせている要素）が潰れたように重なってしまったりして表示崩れを起こしたので。

そのために利用できるのがimagesLoadedプラグインです。

masonry.desandro.com

その潰れたようになってしまうという不具合を解消するには、img要素にwidth, height属性を記述しておけば大丈夫っていう記事をけっこう見かけましたが、それでも自分の場合は解消しきれなかったので、このimagesLoadedプラグインを導入しました。

githubからダウンロードします。

desandro / imagesloaded

github.com

とりあえずmin版を使ってみます。 jquery.imagesloaded.min.js

jQuery本体、masonry、imagesloadedの順に読み込んで

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="js/vendor/jquery.masonry.min.js"></script>
<script src="js/vendor/jquery.imagesloaded.min.js"></script>

jsの記述はこんな具合に。（先にmasonryを仕込んでいて、そこに追加という流れで来てます）

<script>
var $container = $('#container'); // 追加した行

$container.imagesLoaded(function(){ // 追加した行
  $container.masonry({
    itemSelector: '.box',
    columnWidth: 100
  });
}); // 追加した行
</script>