Как интегрировать масонство + бесконечный свиток + угловой

Question

Я пытаюсь интегрировать кладочную сетку с бесконечной прокруткой в ​​угловом приложении.

Я использую для кладки следующую библиотеку https://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);
   }
  }
}

Answer 1

Я бы порекомендовал вам прекратить использовать jQuery AND Angular, однако вы можете использовать этот пакет https://www.npmjs.com/package/angular2-masonry

Этот очень прост в использовании и не требует jQuery, дайте мне знать, если вам нужна помощь, я дам вам несколько советов.

Для бесконечной прокрутки в Angular я лично использую прослушиватель событий прокрутки и отображаю данные 4 на 4 для каждой прокрутки (мое окно может содержать не более 4 элементов), поэтому при каждой прокрутке вы получаете еще 4 элемента.