Angular 和 NGX-Masonry - 显示问题

Question

我想将 Masonry 集成到 Angular 应用程序中。 我安装了ngx-masonry library .
问题:渲染时，我的页面在标题和砖石内容之间存在巨大差距。 我的预期行为:每张卡片都应该从最顶部开始。

Screenshot with percentage width like it should be at the end (第一张卡是从底部开始的灰色框)

低于该间隙，卡片将按预期对齐。

这是我的 html 文件中的代码(经过简化，实际上我在 width2 中有一个项目，在“正常”宽度中有 7 个项目。我希望这就足够了)

<div class="grid-container">
  <h1 class="mat-h1">Headline</h1>
  <ngx-masonry [options]="{itemSelector: '.masonry-item', columnWidth: '.grid-sizer', percentPosition: true }">

    <div class="grid-sizer"></div>

    <ngxMasonryItem class="masonry-item masonry-item--width2">
      <app-card id="card1" title="card 1 in full width">
        <app-card1> </app-card1>
      </app-card>
    </ngxMasonryItem>

    <ngxMasonryItem class="masonry-item">
      <app-card id="card2" title="card 2 with other width">
        <app-card2></app-card2>
      </app-card>
    </ngxMasonryItem>
</ngx-masonry>
<div>

这是我的 sass 文件中的代码:

.grid-sizer, 
.masonry-item {
  width: 50%;
}

.masonry-item--width2 {
  width: 100%;
}

masonry 和标题标签周围的网格容器 div 没有任何自定义样式。

我没有对 masonry 的 component.ts 进行任何更改(仅针对其他内容相关的内容，我不允许共享)。

我尝试为所有项目指定固定宽度，而不是使用百分比。 我对 200 像素内每个项目的结果也非常不满意: Example with fix width

我找不到任何有关此类问题的信息。

如果这很重要:我的项目中也包含了 Angular Material 。

感谢您的帮助，如果有任何不清楚的地方，我很乐意分享更多信息。

Answer 1

我找到了解决方案:

使用@ViewChild(NgxMasonryComponent) masonry: NgxMasonryComponent;，您可以访问masonry对象并单独调用函数。

并使用 this.masonry.reloadItems(); 和 this.masonry.layout(); 您可以“刷新”布局，这对我来说就像魅力。

reloadMasonryLayout() {
    if (this.masonry !== undefined) {
      this.masonry.reloadItems();
      this.masonry.layout();
    }
  }

我在 ngOnInit 中以及每当布局发生变化(由于卡片顺序)时调用此函数

I found this solution in a demo on github