javascript - 动态附加项目时，masonry 不会将它们布局出来

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>

因为我没有使用“附加 masonry 方法”附加它们，所以 masonry 不会将它们布局出来。每次用户向下滚动时，数组都会获取新元素。因此调用 JavaScript 方法:

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

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

如果有任何帮助，我将不胜感激。

更新:

我正在使用我的 Angular 初始化组件方法初始化 masonry ，如下所示:

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

Answer 1

已更新

您可以尝试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');
});
 }