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

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

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

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

WordPressのトップページを雑誌や新聞のような段組にする方法 | Stocker.jp / diary

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

ランチメニュー | カレー東京 com

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

jQueryって素敵やの~: イラストお絵描き練習

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

はっ原因はこれかっ。
全部読み込まないうちに高さを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
 });
});

ランチメニュー | カレー東京 com 1

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