如何实现多列动态高度的UICollectionView瀑布流效果？

需求目标 #

• 实现多列瀑布流效果的UICollectionView，每个单元格仅包含一个StackView
• 单元格宽度固定，高度由内部StackView的条目数量决定（高度可变）
• 每列内的单元格需紧贴上方单元格，列内固定间距为CGFloat(50.0)
• 最终呈现无多余空隙的交错排列视觉效果

当前问题 #

尝试使用UICollectionViewFlowLayout和UICollectionViewCompositionalLayout均未达到预期效果：目前仅能实现单元格顶部对齐，但每行高度会统一适配该行最高单元格，导致下一行从最高单元格底部开始排列，短单元格下方出现大量空白空隙，不符合需求。

可选方案分析 #

1. 自定义UICollectionViewLayout**（推荐）** #

这是实现瀑布流最标准、性能最优的方案，完全支持多列独立垂直布局+整体垂直滚动的场景。核心逻辑是跟踪每一列的当前底部高度，将每个新单元格分配到当前最矮的列下方，并更新该列的底部高度。

虽然你之前没写过自定义布局，但核心需要实现的方法并不复杂：

• prepare()：初始化列高度跟踪数组，计算单元格宽度（考虑间距）
• layoutAttributesForItem(at:)：为每个单元格计算对应的frame位置
• collectionViewContentSize：返回整个集合视图的滚动内容高度（取所有列的最大高度）

2. 并列多个单列UICollectionView #

将每一列作为一个独立的单列UICollectionView，统一放在一个UIScrollView中，或者通过AutoLayout绑定滚动偏移量实现同步滚动。

• 优点：无需编写自定义布局，每个单列使用默认的UICollectionViewFlowLayout即可，逻辑简单
• 缺点：需要手动将数据分配到不同的列集合视图中，还要处理滚动同步、单元格复用的一致性，列数较多时内存占用和性能会不如自定义布局

3. UIScrollView手动布局StackView #

直接在UIScrollView中添加所有StackView，手动计算每个StackView的位置。

• 优点：逻辑最简单，适合数据量较小的场景
• 缺点：没有单元格复用机制，数据量大时会导致内存占用过高、滚动卡顿，还需要自己处理视图的回收与复用逻辑，维护成本高

关于你找到的顶部对齐代码 #

你找到的代码仅能实现行内单元格顶部对齐，并非真正的瀑布流——它没有跟踪每列的高度，只是把行内单元格拉到同一顶部，且代码中硬编码了偏移量和高度，无法适配可变高度的需求。以下是实现真正瀑布流的自定义布局代码：

class WaterfallCollectionViewFlowLayout: UICollectionViewFlowLayout {
    // 列数，可根据需求调整
    private let columnCount = 2
    // 列内单元格间距
    private let interItemSpacing: CGFloat = 50.0
    // 列间距
    private let columnSpacing: CGFloat = 16.0
    
    // 跟踪每一列的当前底部高度
    private var columnHeights: [CGFloat] = []
    
    override func prepare() {
        super.prepare()
        // 初始化列高度数组，初始值为section的top inset
        guard let collectionView = collectionView else { return }
        columnHeights = Array(repeating: collectionView.contentInset.top, count: columnCount)
    }
    
    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        guard let collectionView = collectionView else { return nil }
        let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
        
        // 计算单元格宽度：(集合视图宽度 - 左右inset - (列数-1)*列间距) / 列数
        let totalWidth = collectionView.bounds.width - collectionView.contentInset.left - collectionView.contentInset.right
        let cellWidth = (totalWidth - (CGFloat(columnCount - 1) * columnSpacing)) / CGFloat(columnCount)
        
        // 找到当前高度最小的列
        let minColumnHeight = columnHeights.min() ?? 0
        let columnIndex = columnHeights.firstIndex(of: minColumnHeight) ?? 0
        
        // 计算单元格x坐标：左inset + 列索引*(单元格宽度+列间距)
        let x = collectionView.contentInset.left + CGFloat(columnIndex) * (cellWidth + columnSpacing)
        // 计算单元格y坐标：最小列高度 + 列内间距（第一行不需要间距）
        let y = minColumnHeight + (minColumnHeight == collectionView.contentInset.top ? 0 : interItemSpacing)
        
        // 从数据源获取单元格高度（需要在代理中实现高度计算逻辑）
        guard let delegate = collectionView.delegate as? WaterfallLayoutDelegate else { return nil }
        let cellHeight = delegate.collectionView(collectionView, heightForItemAt: indexPath, width: cellWidth)
        
        // 设置单元格frame
        attributes.frame = CGRect(x: x, y: y, width: cellWidth, height: cellHeight)
        
        // 更新该列的底部高度
        columnHeights[columnIndex] = attributes.frame.maxY
        
        return attributes
    }
    
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        guard let itemCount = collectionView?.numberOfItems(inSection: 0) else { return nil }
        var attributesArray: [UICollectionViewLayoutAttributes] = []
        
        for index in 0..<itemCount {
            let indexPath = IndexPath(item: index, section: 0)
            if let attributes = layoutAttributesForItem(at: indexPath) {
                attributesArray.append(attributes)
            }
        }
        
        return attributesArray
    }
    
    override var collectionViewContentSize: CGSize {
        guard let collectionView = collectionView else { return .zero }
        let maxColumnHeight = columnHeights.max() ?? 0
        return CGSize(width: collectionView.bounds.width, height: maxColumnHeight + collectionView.contentInset.bottom)
    }
}

// 代理协议，用于获取每个单元格的高度
protocol WaterfallLayoutDelegate: UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, heightForItemAt indexPath: IndexPath, width: CGFloat) -> CGFloat
}

使用说明 #

1. 让你的ViewController遵循WaterfallLayoutDelegate协议，实现heightForItemAt方法，根据单元格宽度和内部StackView的内容计算对应的高度
2. 初始化集合视图时，设置布局为WaterfallCollectionViewFlowLayout()
3. 可根据需求调整columnCount、interItemSpacing、columnSpacing等参数

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