Angular 和 NGX-Masonry - 显示问题

Question

我想将 Masonry 集成到 Angular 应用程序中。我安装了 ngx-masonry library.
问题：呈现时，我的页面在标题和 masonry-content 之间有一个巨大的差距。我的预期行为：每张卡片都应该从最上面开始。

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 和 headline 标签周围的 grid-container div 没有任何自定义样式。

我没有在 component.ts 中对砌体进行任何更改（仅针对其他内容相关的内容，我不允许共享）。

我试图给所有项目一个固定的宽度，而不是用百分比来做。我对 200px 中每个项目的结果也很不满意： Example with fix width

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

如果这很重要：我也将 angular-material 包含在项目中。

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

Answer 1

我找到了解决方案：

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

并且使用 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

Angular 和 NGX-Masonry - 显示问题

Angular and NGX-Masonry - display issue

masonry

angular-material

angular