Angular 4动态网格布局求助：按最小高度列添加内容项

嘿，我明白你想实现的是瀑布流布局（也就是把每个新元素放到当前高度最低的列里），你的现有代码逻辑确实存在问题——现在每个列都会渲染所有的items，这显然不是你要的效果。咱们一步步来解决这个问题：

核心思路梳理 #

要实现“每次把项加到高度最小的列”，你需要：

• 维护一个列数组，每个列对象要包含当前高度和该列对应的items列表
• 逐个处理原始items，每次找到高度最低的列，把item推给它，同时更新列的高度

具体实现步骤 #

1. 组件类逻辑改造 #

先在组件里定义列的数据结构，然后完成初始化和item分配逻辑：

import { Component, OnInit } from '@angular/core';

// 定义列的结构：包含该列的item列表和当前高度
interface GridColumn {
  items: any[];
  height: number;
}

@Component({
  selector: 'app-grid-container',
  templateUrl: './grid-container.component.html',
  styleUrls: ['./grid-container.component.css']
})
export class GridContainerComponent implements OnInit {
  // 列数组，用来存储每列的状态
  columns: GridColumn[] = [];
  // 你的原始内容项列表（替换成你实际的数据）
  originalItems = [/* 你的item数据，比如{id:1, content:'xxx'} */];
  // 自定义列数
  columnCount = 3;

  ngOnInit() {
    // 初始化空列
    for (let i = 0; i < this.columnCount; i++) {
      this.columns.push({ items: [], height: 0 });
    }
    // 逐个分配item到最矮的列
    this.originalItems.forEach(item => {
      // 找到当前高度最小的列
      const shortestColumn = this.columns.reduce((prevCol, currCol) => 
        prevCol.height < currCol.height ? prevCol : currCol
      );
      // 把item加入该列
      shortestColumn.items.push(item);
      // 这里先假设item是固定高度，后续可以改成动态获取DOM高度
      shortestColumn.height += 220; // 替换成你的item实际高度值
    });
  }
}

2. 模板代码调整 #

现在模板可以直接循环列数组，每个列只渲染自己对应的items：

<div class="c-grid clearfix">
  <div class="c-grid-col" *ngFor="let col of columns">
    <!-- 把item数据传给你的grid-item组件 -->
    <app-grid-item *ngFor="let item of col.items" [item]="item"></app-grid-item>
  </div>
</div>

3. 处理动态高度的情况（可选） #

如果你的app-grid-item高度不固定，上面的固定高度赋值就不适用了，需要在item渲染后获取实际DOM高度来更新列状态：

// 组件类里添加ViewChildren监听所有grid item
import { ViewChildren, QueryList, ElementRef, AfterViewInit } from '@angular/core';

// 实现AfterViewInit钩子
export class GridContainerComponent implements OnInit, AfterViewInit {
  // ... 之前的代码

  @ViewChildren('gridItem') gridItems!: QueryList<ElementRef>;

  ngAfterViewInit() {
    // 监听item渲染完成，更新列的实际高度
    this.gridItems.changes.subscribe(() => {
      const columnElements = document.querySelectorAll('.c-grid-col');
      columnElements.forEach((el, index) => {
        this.columns[index].height = (el as HTMLElement).offsetHeight;
      });
    });
  }
}

模板里给app-grid-item添加模板引用：

<app-grid-item #gridItem *ngFor="let item of col.items" [item]="item"></app-grid-item>

你原有代码的问题总结 #

• 每个列都循环了所有items，导致所有列内容完全重复
• 没有维护列的高度和对应item列表，无法实现“分配到最矮列”的核心逻辑
• shouldAdd()没有明确的判断规则，无法控制item的分配目标

如果需要支持动态新增item（不是初始化时一次性分配），只需要把“找最矮列→推item→更新高度”的逻辑封装成一个方法，每次新增item时调用即可。

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