ngx-masonry 在 Angular 中无法正常工作获取图像聚类和重叠

问题描述

我必须在 Angular 9 中创建这个特定的布局。

我正在使用 ngx-masonry 包。 (https://www.npmjs.com/package/ngx-masonry) 创建此特定网格。

我的代码如下： 对于 html 组件

<div class="container pt-5">
    <ngx-masonry>
        <div ngxMasonryItem class="masonry-item" *ngFor="let item of masonryItems">
            <img src="{{ item.src }}">
       </div>
    </ngx-masonry>
</div>

对于 ts 组件

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'app-inspirations',templateUrl: './inspirations.component.html',styleUrls: ['./inspirations.component.css']
})
export class InspirationsComponent implements OnInit {
  masonryItems = [
    {src: "../../assets/component_7_images/image1.png"},{src: "../../assets/component_7_images/image2.png"},{src: "../../assets/component_7_images/image3.png"},{src: "../../assets/component_7_images/image4.png"},{src: "../../assets/component_7_images/image5.png"},{src: "../../assets/component_7_images/image6.png"},{src: "../../assets/component_7_images/image7.png"}
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

我得到的结果是：

我需要合适的砖石格式的图片。有人可以指导吗？

解决方法

您需要为您的项目宽度值提供百分比或硬编码值，例如：

    @Component({
  selector: 'my-component',template: `
     <ngx-masonry>
       <div ngxMasonryItem class="masonry-item" *ngFor="let item of masonryItems">
        {{item.title}}
      </div>
     </ngx-masonry>
     `,styles: [
    `
      .masonry-item { width: 200px; }
    `
  ]
})
class MyComponent {
  masonryItems = [
    { title: 'item 1' },{ title: 'item 2' },{ title: 'item 3' },];
}