javascript - 在 jQuery 生成的 div 上使用 Masonry.js

Question

前几天我发现了 Masonry.js，并想开始在项目中使用它。为了练习，我决定尝试制作一个页面，每次单击随机高度和颜色的按钮时都会生成 16 个 div，并观察它们正确定位。问题是，它不起作用。div 生成良好，似乎问题是让 Masonry 从生成的 div 重新计算容器的高度。如果容器上没有高度，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');