[英]ngx-masonry not working properly in Angular. Getting images clustered and overlapping
我正在使用 ngx-masonry package。 ( 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' },
];
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.