Question

我在我的角度应用程序中使用砖石设计：https://www.npmjs.com/package/ngx-masonry

我的问题是某些项目重叠：

当我手动更改窗口大小时，它看起来不错：

有什么想法要解决吗？

module.ts

import { NgxMasonryModule } from 'ngx-masonry';
imports: [ NgxMasonryModule]

component.html

<ngx-masonry class="row small-gutters">
     <div ngxMasonryItem *ngFor="let evento of eventos | async" class="py-0 grid-five col-lg-3 col-md-4 col-sm-6 col-6 my-2">
            <div class="aviso">
                <a [routerLink]="['/evento', evento.id]" class="text-white">
                    <img src="{{ evento.imagen }}" class="rounded" alt="{{ evento.titulo }}" width=100%>
                    <div class="pt-1 pt-md-2 d-flex align-items-start">
                        <div class="fechaThumbnail d-none d-lg-block">
                            <h4 class="dia">{{ evento.fechaInicio.toDate() | date: 'dd' }}</h4>
                            <h6 class="mes">{{ evento.fechaInicio.toDate() | date: 'LLL' | uppercase | slice:0:3 }}</h6>
                        </div>
                        <div>
                            <h6 class="font-weight-light mb-0 text-primary">{{ evento.titulo | truncate: 42 }}</h6>
                            <div class="small font-weight-light op-50 mt-1">
                                <span class="d-none d-lg-block">{{ evento.direccion | truncate: 25 }}</span>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
 </ngx-masonry>

Answer 1

为避免重叠问题，您必须在ngx-masonry标签中添加以下代码 [useImagesLoaded] =“ true”

请仔细阅读实际标签的注释

注意：我也遇到相同的重叠问题。

我希望这会对您有所帮助。

Answer 2

请这样更新您的代码

在div标签中添加属性[useImagesLoaded] =“ true”。 ngxMasonryItem旁边

角7砌体覆盖

2 个答案: