［jQuery Masonry］を使う際、Webkit系のブラウザ（Safari、Chrome）によっては、読み込みの際にボックスが重なり、初動では意図したように表示されないケースがあります。

巷のブログでは、その不具合を解決するために「<img>要素に［width］［height］属性をそれぞれ記述しておけば大丈夫」という記事を見かけます。
しかし実際には、その方法では問題を解決しきれません。
そこでお勧めするのは、同じjQueryプラグインの［imagesLoaded］を併用するワザです。

［imagesLoaded］を使うと、画像を表示する際、先にデータを完全に読み込み、読み込みが完了した後に任意の処理を実行できるようになります。

この特性を利用して、［Masonry］側の計算処理が完全に終了してからデータの表示を始めるようにすることで、ページ読み込み時にレイアウトが崩れる既知の問題を解決しよう、というのがこの方法の狙いです。

ここでは、［Masonry］のほうは既にインストールされている前提で、追加で［imagesLoaded］を導入する方法を紹介します。

ちなみに［Masonry］の使用に関しては以下の記事を参照ください。

［Masonry］の導入方法

とりあえず［imagesLoaded］をダウンロードします。

ダウンロード：imagesLoaded

［jQuery］本体と［Masonry］も合わせて<head>〜</head>内に読み込みますが、このときエラーがないように、念のために各jQueryの読み込み順も留意します。

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

これまでの Masonry の設定は一旦破棄して、以下のコードを記述。
これが今回のテーマの肝になります。

$(function(){
var $container = $('#masonry');
$container.imagesLoaded(function(){
	$container.masonry({
		itemSelector: '.item',
		isFitWidth: true,
		isAnimated: true
	});
});
});

エラーのあったブラウザで表示を試してみると、見事に不具合が解消されているのを確認できるはずです。

実装サンプル：https://on-ze.com/demo/jquery-masonry/