関連記事のデザインが普通過ぎたのでもう少しかっこ良くしようと思い、あのPinterestで有名なグリッドレイアウトに設定してみました。

Pinterest風グリッドレイアウトとは

これ！このいかした個々のグリッドがうまい具合に積み重なってくれる様なレイアウト。

Masonryとは

そのグリッドレイアウトを簡単に実現してくれるJavaScriptのライブラリ。

ウィンドウの横幅に合わせてグリッドがうにゅうにゅとアニメーションしてくれます。

どのように動くかはこちら。

設定後

ウィンドウの横幅を狭めるとそれにあわせてグリッドのサイズもアニメーション付きで変わってくれます（PCブラウザのみ）。ある程度の狭さまでいくと２列になるように設定しました。

このページは関連記事がないのでこちらで動きが確認できます。

iPhoneから見るとウィンドウサイズは変えられないのでアニメーションは無いけどグリッドレイアウトにはなってくれます。

若干の問題発生

でもiPhoneからだとたまにグリッドがかぶってしまう時があってそれが悩みです。JavaScriptがうまく動いてくれてないのか、masonry系のコードを差し込む場所が悪いのかなんなのかわからず…PCブラウザからだと全く問題はないのだけれども。ウィンドウのサイズを変えないとJavaScriptが走ってない時があるんじゃないか疑惑もあるようなないような…でもいつもって訳でもなさそうだしちょっとよくわかりません…

救世主現る

と思いきやすごく参考になる記事を見つけましてそちらの解決策を試してみたら解決したような！

jQuery Masonryを使う際にわりと大事なimagesLoadedプラグイン（ウェブ、ショウジンさんの記事）

どうやら画像の読み込みがmasonryに影響してたようです。画像が読み込まれてないうちにmasonryが動いちゃうと高さがうまくとれないとか。PCだと大丈夫でiPhoneだとよく起こったのもその辺の処理速度が原因だったりしたのかななんて。でもこれでなんとか綺麗に表示されるようになってすごく感謝！

レイアウトでなにか問題があるなら描画のタイミングをまず疑ってみるのがいいのかもしれないと改めて実感です。