Demo地址

自帶過渡效果的UICollectionView瀑布流布局。

Feature：
    ? 自帶過渡效果；
    ? 可自定義列數、間距等屬性；
    ? 適配橫豎屏；
    ? 提供異步刷新；
    ? 兼容 OC & Swift；
    ? API簡單易用。

效果

• 整體刷新效果

• 列數變化效果

• 增/刪/改效果

• 適配橫豎屏

使用

1. 只需將WaterfallLayout.swift文件拖進項目

2. 初始化waterfallLayout及collectionView并成為其代理

let waterfallLayout = WaterfallLayout()
waterfallLayout.delegate = self

let collectionView = UICollectionView(frame: UIScreen.main.bounds, collectionViewLayout: waterfallLayout)
collectionView.delegate = self
collectionView.dataSource = self
view.addSubview(collectionView)

3. 實現waterfallLayout的代理方法，搞定

extension ViewController: WaterfallLayoutDelegate {
    /// 提供item的下標和（根據列數和間距得出）的寬度，需代理返回對應item的高度
    func waterfallLayout(_ waterfallLayout: WaterfallLayout, heightForItemAtIndex index: Int, itemWidth: CGFloat) -> CGFloat {
        // 具體可參考Demo
        let girl = girls[index]
        return itemWidth / girl.whRatio
    }
    
    ///【可選】cell的總列數
    func colCountInWaterFlowLayout(_ waterfallLayout: WaterfallLayout) -> Int {
        4
    }
    
    ///【可選】cell的列間距
    func colMarginInWaterFlowLayout(_ waterfallLayout: WaterfallLayout) -> CGFloat {
        5
    }
    
    ///【可選】cell的行間距
    func rowMarginInWaterFlowLayout(_ waterfallLayout: WaterfallLayout) -> CGFloat {
        5
    }
    
    ///【可選】collectionView的內容間距
    func edgeInsetsInWaterFlowLayout(_ waterfallLayout: WaterfallLayout) -> UIEdgeInsets {
        UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
    }
}

4. 刷新布局

// 帶動畫刷新：使用自定義動畫包裹collectionView的刷新操作
UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.88, initialSpringVelocity: 1) {
    self.collectionView.performBatchUpdates {
        self.collectionView.reloadSections(IndexSet(integer: 0))
    }
}

// 不帶動畫刷新
collectionView.reloadData()

Tips

1. 目前僅支持UICollectionViewCell和單Section的布局，也就是說不支持Section頭、Section尾和多個Section的情況；

2. 當數據量龐大時，可使用異步刷新：

waterfallLayout.asyncUpdateLayout(itemTotal: girls.count) { [weak self] index, itemWidth in
    // 提供item的下標和（根據列數和間距得出）的寬度，返回對應item的高度
    guard let self = self else { return 1 }
    let girl = self.girls[index]
    return itemWidth / girl.whRatio
} completion: { [weak self] in
    // 刷新布局
    guard let self = self else { return }
    UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.88, initialSpringVelocity: 1) {
        self.collectionView.performBatchUpdates {
            self.collectionView.reloadSections(IndexSet(integer: 0))
        }
    }
}

PS：目前已做了初步優化，即便不使用異步刷新，在展示和滑動大量數據的列表（如用戶相冊）時也能保持頁面流暢：

• 后續迭代將不斷優化！