动态附加项目时，砌体不会将它们布置出来

Question

我正在使用 Masonry JavaScript 网格布局库 https://masonry.desandro.com/。使用 Angular *ngfor 直接从 DOM 将新项目附加到网格时遇到问题，它遍历数组，如下所示：

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

因为我没有使用“附加砌体方法”附加它们，所以砌体不会将它们布置出来。每次用户向下滚动时，该数组都会获取新元素。于是调用了一个 JavaScript 方法：

onScrollDown() {
 // add another 20 items
 this.sum += 20;
 for (let i = start; i < this.sum; ++i) {
     this.array.push(i);  }
 }

当数组获得更多元素时，它会自动创建新的 html 项。所以我需要在创建新项目后再次找到砌体布局的方式。在将元素添加到 OnScrollMethod 中的数组后，我尝试调用 $grid.masonry('layout') 但它不起作用。 我也在尝试 $('.grid').masonry('reloadItems') ，但是调用此方法时新项目与以前的项目重叠。

我将不胜感激。

更新：

我正在使用我的角度初始化组件方法初始化砌体，如下所示：

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

Answer 1

我在 Vue.js 中使用了 masonry-layout 并且遇到了同样的问题。解决我的问题的方法是：

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

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

Answer 2

更新

你可以试试reloadItems。如果您正在加载图片，请使用imagesLoaded.js 以避免重叠：

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');
});
 }

Answer 3

自从我不得不这样做已经很多年了，但基本上：

Masonry 运行大量 JS，以便为您正在创建的元素找出最佳的装箱方式。 这意味着它会在您所在区域内的每张“卡片”上硬编码大量样式信息，并在计算后对其进行设置。 如果您使用 Masonry 向该视图添加新的“卡片”，那么它将继续更新视图，并更改这些卡片的布局和大小。 如果您不使用之前的 Masonry 实例（您使用的是元素，而不是 Masonry 对象），那么 Masonry 就无法跟踪更改。此时，您要么必须将它们添加到 DOM，然后通过 addItems 将它们添加到对象，然后调用 layout()（或 masonry()）... 或者您必须重新包装 DOM 元素再次砌体，现在元素已更新。

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

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