Сохраните исходный порядок медиаэлементов в плагине angular2-masonry

Можно подождать, пока все изображения будут загружены, прежде чем кирпич будет добавлен с помощью useImagesLoaded, без размеров кладка не может поддерживать желаемое расположение.

Чтобы добавить useImagesLoaded:

Включите это в свой .angular-cli.json import src или в index.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>

Если бы для атрибута use Image установлено значение true:

<masonry [useImagesLoaded]="true"></masonry>

Другой вариант - использовать setTimeout для вызова reloadItems и layout:

Один из способов сделать это - сначала сослаться на компонент:

@ViewChild(AngularMasonry) private masonry: AngularMasonry;

Затем обработайте событие:

itemsLoadHandler() {
  setTimeout(() => {
    this.masonry.reloadItems();
    this.masonry.layout();
  });
}

Вы также можете прослушивать эти события:

// Outputs
@Output() layoutComplete: EventEmitter<any[]> = new EventEmitter<any[]>();
@Output() removeComplete: EventEmitter<any[]> = new EventEmitter<any[]>();

ngOnInit() {
  this.masonry.on('layoutComplete', (items: any) => {
    this.layoutComplete.emit(items);
  });
  this.masonry.on('removeComplete', (items: any) => {
    this.removeComplete.emit(items);
  });
}

надеюсь, это поможет