能否用Angular Material Grid List实现瀑布流网格？

首先直接给结论：Angular Material的<mat-grid-list>组件原生并不支持瀑布流布局。因为它严格遵循Material Design的Image Lists规范设计，所有网格tile都会被强制设置为等高，这和你想要的「不同高度元素自动填充空白」的瀑布流效果完全不符——这也是你当前代码呈现出所有卡片高度一致的核心原因。

你当前代码里的cols="6"和fit属性，会让每个<mat-grid-tile>自动拉伸到相同高度，不管卡片内容多少，都会被统一高度，就像你截图里的效果。

下面给你两种可行的解决方案，同时满足瀑布流+元素过滤的需求：

方案1：纯CSS实现（简单易维护） #

用CSS的多列布局（CSS Columns）就能快速实现基础瀑布流，不需要额外依赖，非常适配你的需求。

实现步骤： #

1. 替换<mat-grid-list>为普通容器div，移除所有Grid List相关属性
2. 给容器和子元素添加CSS样式
3. 保留原有数据绑定和过滤逻辑

代码示例： #

模板：

<!-- 过滤输入框（按需添加） -->
<input type="text" [(ngModel)]="filterTerm" placeholder="搜索公告...">

<!-- 瀑布流容器 -->
<div class="masonry-grid">
  <div class="masonry-card border rounded bg-light p-2"
       *ngFor="let aviso of avisos | async | filterPipe: filterTerm">
    <span class="font-weight-bold">{{aviso.titulo}}</span><br>
    <span class="small">{{aviso.descripcion}}</span>
  </div>
</div>

CSS样式：

.masonry-grid {
  column-count: 6; /* 对应你原来的6列设置 */
  column-gap: 1rem; /* 列之间的间距 */
  padding: 1rem;
}

.masonry-card {
  break-inside: avoid; /* 防止卡片被列分割成两半 */
  margin-bottom: 1rem; /* 卡片底部间距 */
}

/* 响应式适配（可选） */
@media (max-width: 992px) {
  .masonry-grid {
    column-count: 4;
  }
}

@media (max-width: 576px) {
  .masonry-grid {
    column-count: 2;
  }
}

自定义过滤管道：

你需要创建一个过滤管道实现元素筛选功能：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterPipe' })
export class FilterPipe implements PipeTransform {
  transform(items: any[], filterTerm: string): any[] {
    if (!items || !filterTerm) return items;
    
    const lowerCaseTerm = filterTerm.toLowerCase();
    return items.filter(item => 
      item.titulo.toLowerCase().includes(lowerCaseTerm) ||
      item.descripcion.toLowerCase().includes(lowerCaseTerm)
    );
  }
}

记得在你的Angular模块中声明这个管道，才能在模板中正常使用。

方案2：使用Masonry.js（专业瀑布流） #

如果需要更复杂的瀑布流功能（比如元素排序、动画加载、动态调整布局），可以用Masonry.js这个专门的瀑布流库。

实现步骤： #

1. 安装依赖：

npm install masonry-layout --save

2. 在组件中初始化Masonry实例：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import Masonry from 'masonry-layout';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  @ViewChild('masonryGrid') masonryGrid!: ElementRef;
  private masonryInstance: Masonry | undefined;
  filterTerm = '';

  ngAfterViewInit() {
    // 初始化Masonry布局
    this.masonryInstance = new Masonry(this.masonryGrid.nativeElement, {
      itemSelector: '.masonry-card',
      gutter: 16, // 卡片间距
      columnWidth: '.masonry-card'
    });
  }

  // 数据变化（比如过滤后）重新触发布局
  onFilterChange() {
    setTimeout(() => {
      this.masonryInstance?.layout();
    });
  }
}

3. 模板代码：

<input type="text" [(ngModel)]="filterTerm" placeholder="搜索公告..." (input)="onFilterChange()">

<div #masonryGrid class="masonry-grid">
  <div class="masonry-card border rounded bg-light p-2"
       *ngFor="let aviso of avisos | async | filterPipe: filterTerm">
    <span class="font-weight-bold">{{aviso.titulo}}</span><br>
    <span class="small">{{aviso.descripcion}}</span>
  </div>
</div>

注意：

当过滤条件变化时，必须调用layout()方法让Masonry重新计算布局，否则元素位置可能会错乱。

总结 #

• Angular Material Grid List不适合做瀑布流，它的设计目标是规整的等高网格
• 简单需求用CSS Columns就能快速实现，开发成本最低
• 复杂需求用Masonry.js，功能更强大、扩展性更好
• 过滤功能通过自定义Angular管道实现，两种方案都完美兼容

内容的提问来源于stack exchange，提问作者Paco Zevallos