Question

代码位于http://codepen.io/soap262/pen/XbEeXm。有问题的部分是

$('.grid').append(gridItemDivs1);
$('.group1').css("background-color", "blue");

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 160,
  gutter: 20
});

$('.grid').append(gridItemDivs2);
$('.group2').css("background-color", "orange");
$('.grid').masonry();

第一组网格项div由砌体正确处理，但它似乎永远不会触及第二组。 Desandro在http://masonry.desandro.com/methods.html的文档做得非常好，但我仍然遗漏了一些东西。它是什么？

Answer 1

我相信你应该在你的第二段代码中调用砌成附加方法：

$('.grid').append(gridItemDivs1);
$('.group1').css("background-color", "blue");

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 160,
  gutter: 20
});

$('.group2').css("background-color", "orange");
$('.grid').masonry('appended', gridItemDivs2);

Answer 2

我找到了另一个问题：Masonry - Divs stack correctly only once on each page load。如果首先销毁砌体，然后重新初始化，包括所有参数，第二组div将正确加载：

$('.grid').masonry('destroy');
$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 160,
  gutter: 20
});

文档清楚地表明砌体应该能够处理更新，因此这不是理想的解决方案。

砌体jquery添加div

2 个答案: