jQueryプラグイン「Masonry」でレイアウトが崩れた時の対処法!

2015/01/19

こんにちは。
今回はjQueryプラグイン「Masonry」でレイアウトが崩れた時の対処法!です。

このブログのトップページに可変グリッドを簡単に実装できるjQueryプラグインの「Masonry」を使っているのですが、それが原因でレイアウトが崩れてしまっていました。
Firefoxだと崩れたり崩れなかったりと不安定で、Google Chromeだと完全に崩れていました。
崩れといってもいろいろあるのですが、今回の場合は下記の画像のように上下の要素と要素が重なっていました。

masonry_broken

 

Masonryはページが完全に読み込まれる前に高さの計算が行われているようなので、下記のようにスクリプトを変更すると崩れなくなりました。

 

 

masonry_broken2

 

「$(function()」を「$(window).load(function()」に変更したのですが、
「$(function()」は「$(document).ready(function()」の省略形ですので同じ意味になります。
「$(document).ready(function()」はこのドキュメントが読み込まれたら処理をするという意味になります。
「$(window).load(function()」は画像も含めたページが完全に読み込まれたら処理をするという意味になります。
なので、画像を読み込まれた後に高さの計算が行われるようになったので、崩れなくなりました。

 

プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート
プラグインを使わないスキルを身につけたい人のためのjQueryテクニカルノート

 

いかがでしたか。他の方法で直る場合もあるみたいですが、これが一番手っ取り早いように思います。
以上でjQueryプラグイン「Masonry」でレイアウトが崩れた時の対処法!でした。

topへ戻る