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

Question

Я использую плагин angular2-masonry для углового проекта, где мне нужно отображать медиафайлы без изменения их порядка. Для плагина angular2-masonry опция недоступна. Так есть ли способ сделать это?

Благодарю.

Answer 1

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

Добавить useImagesLoaded:

Включите это в свой файл импорта.angular-cli.json или в index.html.

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

Если для атрибута использования изображения установлено значение 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);
  });
}

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