WordPressでjQuery Masonry使ったら重なっちゃった時の解決方法

レスポンシブ・ウェブ・デザインでサイトをつくっているとき、イメージの一覧にテキストをつけて表示させる場合もやっぱりレスポンシブにしたいもの。

そんなときには、jQuery MasonryというjQueryのプラグインが便利なんだけど、WordPressで使う場合は、jQueryをカプセル化したり、 wp_enqueue_scriptをつかって、jsファイルを読み込むのがなかなか敷居が高かったりします。

そのやり方は、多分、なつきさんのStocker_jpのこの記事が一番わかりやすいと思います。

で、こちらの記事を読みながらやってみたのですが、なぜだかイメージが重なってしまう問題が発生。

clear bothを使ったり、改行やテキストいれたりしたものの解決せず、いろいろ調べていたらこちらのサイトを発見。

こちらに書いてあるこのコメント。

はっ原因はこれかっ。
全部読み込まないうちに高さをmasonry様が計算すると要素が重なってしまう。
そうなのか…なるほど。

なるほどなるほど。そういうことだったんですね。助かりました。

最初はこのように書いていたjsファイルを、

jQuery(function(){
 jQuery( '#shop_info_lunch_pictures' ).masonry({
  itemSelector: '.lunch_picture',
  columnWidth: 190
 });
});

こんな風に変更したら、無事に重なってしまう問題は解決しました。

jQuery(window).load(function(){
 jQuery( '#shop_info_lunch_pictures' ).masonry({
  itemSelector: '.lunch_picture',
  columnWidth: 190
 });
});

Stocker_jpのなつきさん、イラストお絵描き練習さん、ありがとうございました！