Question

我正在使用angular2-masonry插件进行角度项目，我需要在不改变其顺序的情况下显示媒体。 angular2-masonry插件没有可用的选项。那么有什么方法可以实现它吗？

感谢。

Answer 1

在使用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>

使用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);
  });
}

希望有所帮助

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

1 个答案: