如何整合 Masonry + Infinite Scroll + Angular答案

【问题标题】：How to Integrate Masonry + Infinite Scroll + Angular如何整合 Masonry + Infinite Scroll + Angular
【发布时间】：2017-11-05 12:07:38
【问题描述】：

我正在尝试在 Angular 4 应用程序中集成具有无限滚动功能的砌体网格。

我正在使用以下库 masonry.desandro.com 进行砌体无限滚动：ngx-infinite-scroll

滚动时遇到问题，项目重叠。我不知道我是否没有正确初始化它。我感谢任何帮助，即使这意味着使用其他适用于 angular 4 的库。

我的代码如下所示：

*plunker

HTML：

<div class="search-results" infinite-scroll [infiniteScrollDistance]="2" 
      [infiniteScrollThrottle]="10" (scrolled)="onScrollDown()"
       [scrollWindow]="true">
   <div class="grid">
      <div class="grid-item grid-item--height{{i}}" *ngFor="let i of array">
      {{i}}
   </div>
</div>

我的组件：

export class HomeComponent implements OnInit {

  ngOnInit() {    
   jQuery(document).ready(function () {
     jQuery('.grid').masonry({
     // options
     itemSelector: '.grid-item',
     columnWidth: 200
     });
   });
 }
array = [];
sum = 20;

modalIsOpen = '';

constructor() {
  for (let i = 0; i < this.sum; ++i) {
  this.array.push(i);
  }
 }

onScrollDown() {

console.log('scrolled!!');
// add another 20 items
const start = this.sum;
this.sum += 20;
  for (let i = start; i < this.sum; ++i) {
   this.array.push(i);
   }
  }
}

【问题讨论】：

标签： angular infinite-scroll masonry angular-masonry

【解决方案1】：

我会建议你停止使用 jQuery 和 Angular，但是你可以使用这个包 https://www.npmjs.com/package/angular2-masonry

这个很容易使用，不需要jQuery，如果你需要帮助，请告诉我，我会给你一些提示。

对于无限滚动，在 Angular 中，我个人使用滚动事件侦听器并在每次滚动时显示数据 4 per 4（我的窗口最多可以包含 4 个项目），因此每次滚动时，您都会获得 4 个更多项目。

【讨论】：