Javascript 动态附加项目时，砌体不会将其布局出来

我正在使用一个JavaScript网格布局库。当使用Angular*ngfor直接从DOM向网格中添加新项时，我遇到了一个问题，它通过数组进行迭代，如下所示：

<div class="grid">
  <div class="grid-item grid-item--height{{i}}" *ngFor="let i of array">
   {{i}}
  </div>
</div>

  ngOnInit() {
  this.$grid = jQuery('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: 384,
    gutter: 24
  });

---

我已经很多年没有这样做了，但基本上：

砌体运行了大量的JS，以便为您正在创建的元素找出最佳的箱子包装。 这意味着它会在你所在区域内的每张“卡片”上硬编码许多样式信息，并在计算后设置。 如果使用砌体向该视图添加新的“卡”，则它将继续更新视图，并更改这些卡的布局和大小。 如果不使用以前的砌体实例（使用的是图元，而不是砌体对象），则砌体无法跟踪更改。此时，您要么将它们添加到DOM中，然后通过

addItems

，将它们添加到对象中，然后调用

layout（）

（或

marysish（）

）。。。或者，现在元素已经更新，您必须再次在砌体中重写DOM元素

这可能已经改变了，但我对此表示怀疑

我想，通过编写角度指令，您可以做一些事情，但实现这一点的廉价而愉快的方法是保存组件元素的实例（或控制器绑定到的元素…无论什么），还保存对所做的砌体视图的引用，并在更新时添加所有项，再次调用布局。。。 …或者，在每次渲染时，使用根元素创建一个新的砌体视图。 PS：确保一次加载很多新元素，因为如果一次只加载3个元素，那么会很混乱。。。

---

…另外，请确保在元素中预加载图像，因为如果之后加载图像，您的砖石布局将变得非常非常混乱。

我已经很多年没有这样做了，但基本上：

砌体运行了大量的JS，以便为您正在创建的元素找出最佳的箱子包装。 这意味着它会在你所在区域内的每张“卡片”上硬编码许多样式信息，并在计算后设置。 如果使用砌体向该视图添加新的“卡”，则它将继续更新视图，并更改这些卡的布局和大小。 如果不使用以前的砌体实例（使用的是图元，而不是砌体对象），则砌体无法跟踪更改。此时，您要么将它们添加到DOM中，然后通过

addItems

，将它们添加到对象中，然后调用

layout（）

（或

marysish（）

）。。。或者，现在元素已经更新，您必须再次在砌体中重写DOM元素

这可能已经改变了，但我对此表示怀疑

我想，通过编写角度指令，您可以做一些事情，但实现这一点的廉价而愉快的方法是保存组件元素的实例（或控制器绑定到的元素…无论什么），还保存对所做的砌体视图的引用，并在更新时添加所有项，再次调用布局。。。 …或者，在每次渲染时，使用根元素创建一个新的砌体视图。 PS：确保一次加载很多新元素，因为如果一次只加载3个元素，那么会很混乱。。。 …此外，请确保在元素中预加载图像，因为如果随后加载图像，您的砖石布局将变得非常、非常混乱。

更新

您可以尝试重新加载项目。如果正在加载图像，请使用以避免重叠：

ngOnInit() {
this.$grid = jQuery('.grid').imagesLoaded( function() {
jQuery('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 384,
gutter: 24
});
});


onScrollDown() {
// add another 20 items
this.sum += 20;
for (let i = start; i < this.sum; ++i) {
 this.array.push(i);  }
jQuery('.grid').imagesLoaded( function() {
jQuery('.grid').masonry('reloadItems');
});
 }

ngOnInit（）{
这个.$grid=jQuery（'.grid'）.imagesLoaded（函数（）{
jQuery（'.grid'）.mashine({
//选择权
itemSelector:“.grid项”，
列宽：384，
排水沟：24
});
});
onScrollDown（）{
//再增加20项
这是1.sum+=20；
for（设i=start；i

已更新

您可以尝试重新加载项目。如果您正在加载图像，请使用以避免重叠：

ngOnInit() {
this.$grid = jQuery('.grid').imagesLoaded( function() {
jQuery('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 384,
gutter: 24
});
});


onScrollDown() {
// add another 20 items
this.sum += 20;
for (let i = start; i < this.sum; ++i) {
 this.array.push(i);  }
jQuery('.grid').imagesLoaded( function() {
jQuery('.grid').masonry('reloadItems');
});
 }

ngOnInit（）{
这个.$grid=jQuery（'.grid'）.imagesLoaded（函数（）{
jQuery（'.grid'）.mashine({
//选择权
itemSelector:“.grid项”，
列宽：384，
排水沟：24
});
});
onScrollDown（）{
//再增加20项
这是1.sum+=20；
for（设i=start；i

我在Vue.js中使用了砌体布局，但遇到了相同的问题。解决问题的方法是：

onScrollDown() {
  // ...
  // after add another 20 items
  this.msnry.reloadItems();
  this.msnry.layout();
 }

---

该.msnry是我的砌体布局实例。

我在Vue.js中使用了砌体布局，并且遇到了相同的问题。解决问题的方法是：

onScrollDown() {
  // ...
  // after add another 20 items
  this.msnry.reloadItems();
  this.msnry.layout();
 }

---

这个.msnry是我的砖石布局实例。

谢谢@Macsupport。我试过$（'.grid'）。砖石（'reloadItems'））它似乎在运行Mashise，但现在它正在将新项目重叠在以前项目的顶部。我正在使用角度初始化组件方法初始化Mashise。请参阅问题中的更新。知道如何停止重叠行为吗？如果正在加载图像，则需要使用以避免重叠。谢谢@Macsupport.I已尝试$（'.grid'）.mashine（'reloadItems'））它似乎在运行Mashise，但现在它正在将新项目重叠在以前项目的顶部。我正在使用角度初始化组件方法初始化Mashise。请参阅问题中的更新。知道如何停止重叠行为吗？如果正在加载图像，则需要使用以避免重叠。谢谢@Norguard。这是这种方法有点复杂。让我看看我是否能消化它并尝试一下。@D.B它很复杂，因为不管你是否知道，你有很多事情要做。棱角的工作方式和砖石的工作方式并不协调，没有以这样或那样的方式做你自己的工作，也没有找到（/制作）一些这样的库。Ma