javascript - jQuery で生成された div で Masonry.js を使用する

Question

先日 Masonry.js を見つけ、プロジェクトで使い始めたいと思いました。練習として、ランダムな高さと色のボタンをクリックするたびに 16 の div を生成するページを作成して、それらが適切に配置されるのを確認することにしました。問題は、それが機能していないということです。div は正常に生成されます。問題と思われるのは、生成された div からコンテナの高さを Masonry に再計算させることです。コンテナーに高さがないと、Masonry は他の div の適切な高さを計算できません。コンテナーで clearfix を使用して、ネストされた要素の周りに広がるようにしようとしましたが、うまくいきませんでした。誰でも助けることができますか？

このペンをチェックしてください

Answer 1

addItems を使用してアイテムを追加するか、破棄して再作成して再計算する必要があります: http://codepen.io/bhlaird/pen/HusbL

//Reload Masonry
$wall.masonry('destroy');
$wall.masonry({
  columnWidth: '.brick',
  itemSelector: '.brick'
});

リロードしてレイアウトすることもできます。

//Reload Masonry
$wall.masonry('reloadItems');
$wall.masonry('layout');