保持angular2-masonry插件中媒體元素的原始順序

Question

我在一個有角度的項目中使用angular2-masonry插件，在這里我需要顯示媒體而不更改其順序。 angular2-masonry插件沒有可用的選項。 那么有什么辦法可以實現呢？

謝謝。

Answer 1

在使用useImagesLoaded添加磚塊之前，可以等待所有圖像加載useImagesLoaded ，而尺寸砌體無法維持所需的布置。

添加useImagesLoaded ：

將此包含在.angular-cli.json導入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);
  });
}

希望能有所幫助