angular - 保持 angular2-masonry 插件中媒体元素的原始顺序

Question

我正在为 Angular 项目使用 angular2-masonry 插件，我需要在不更改其顺序的情况下显示媒体。angular2-masonry 插件没有可用的选项。那么有没有办法让它发生呢？

谢谢。

Answer 1

在添加砖块之前，可以等待所有图像加载完毕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调用reloadItemsand 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);
  });
}

希望有帮助