时间戳

首页 > 解决方案 > 角度 7 中的砌体覆盖

angular - 角度 7 中的砌体覆盖

问题描述

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

我的问题是某些项目重叠： 在此处输入图像描述

当我手动更改窗口大小时，它看起来不错： 在此处输入图像描述

知道如何解决吗？

模块.ts

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

组件.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>

标签： angularmasonry

解决方案

为避免重叠问题，您必须将以下代码添加到 ngx-masonry 标签 [useImagesLoaded]="true"

请阅读实际标签的评论

注意：我也面临同样的重叠问题。

我希望这能帮到您。

推荐阅读