Masonryを使って、画像やコンテンツを読み込むときやウィンドウリサイズ時にタイル上に配置することってたまにあると思うんですが、

ちょっと動きがおかしかったケースがあったので書いておきます。

タイル状に配置する要素が重なってしまう

原因はおそらく他のjsとの実行タイミングの干渉や画像の読み込み前にサイズ算出してるとかだと思うんですが、
実装したページにアクセスした時に、タイル上に配置のアニメーションが途中で止まったかのように、要素が重なった状態になっていました。

imagesLoadedで対応する

これは公式サイトにも書いてありました。
「imagesLoaded」というライブラリ使って、Masonryの実行タイミングを画像読み込み後にしてくれってことでした。

imagesLoaded ウェブサイト
imagesLoaded GitHub

行うことはたったふたつ、簡単！

・imagesLoadedをDLして読み込ませる
・もとのMasonryを動かすjsの記述の変更

読み込ませるところは省きますね。masonry記述後でOKです。

修正前はこんなかんじかと思います。

  $(function(){
    $('#container').masonry({
      itemSelector: '.box',
      isAnimated: true,
      isFitWidth: true,
      columnWidth: 200
    });
  });

それをこんな感じでimagesLoadedの記述に合わせちゃいましょう。

var $container = $('#container');　//タイトル状に配置するコンテンツの親要素の指定
  
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.box',　//タイトル状に配置する要素のclassの指定
    isAnimated: true,
	  isFitWidth: true,
		columnWidth: 190
  });
});

これで画像読み込み後にmasonryが動くので高さがきちんと算出され、要素の重なりはなくなります。

masonryのために限らず色んな場面で使えそうなライブラリですね！