Swift-简单瀑布流实现

image.png

大神解说原理是一样的这里主要是Swift版的

1.定义所需属性

瀑布流的思路就是，从上往下，那一列最短，就把下一个item放在哪一列，因此我们需要定义一个字典来记录每一列的最大y值
每一个item都有一个attributes，因此定义一个数组来保存每一个item的attributes。
我们还必须知道有多少列以及列间距、行间距、section到collectionView的边距。

image.png

2.重写系统方法

我们一共需要重写4个方法

1）- (void)prepareLayout
2）- (CGSize)collectionViewContentSize
3）- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
4）- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
- (void)prepareLayout 方法

布局前的一些准备工作都在这里进行，初始化字典，有几列就有几个键值对，key为第几列，value为列的最大y值，初始值为上内边距：

接下来计算item的坐标，要想计算坐标，那就必须知道最短的那一列，先遍历字典，找出最短列是哪一列（minColumn）以及其最大y值。
item的y值就等于最短列的最大y值再加上行间距，x值就等于左边距 + (item宽度 + 列间距) * minColumn

image.png

直接上代码 (每一步都有注释)

import UIKit

@objc protocol HWCollectionViewFlowLayoutDelegate : NSObjectProtocol {
    /// 返回高度
    func hw_setCellHeght(layout : HWCollectionViewFlowLayout,indexPath : NSIndexPath,itemWidth : CGFloat) -> CGFloat
    
    /// 返回行数
    @objc optional func hw_columnCountInWaterFlowLayout(layout : HWCollectionViewFlowLayout) -> Int
    /// 返回列间距
    @objc optional func hw_columnMarginInWaterFlowLayout(layout : HWCollectionViewFlowLayout) -> CGFloat
    /// 返回行间距
    @objc optional func hw_rowMarginInWaterFlowLayout(layout : HWCollectionViewFlowLayout) -> CGFloat
    
    @objc optional func hw_edgeInsetsInWaterFlowLayout(layout : HWCollectionViewFlowLayout) -> UIEdgeInsets
}

class HWCollectionViewFlowLayout: UICollectionViewFlowLayout {
    
    weak open var delegate : HWCollectionViewFlowLayoutDelegate?
    fileprivate let defaultColumnCount : Int = 3 //列数
    fileprivate let defaultColumnMargin : CGFloat = 10 // 列间距
    fileprivate let defaultRowMargin : CGFloat = 10 // 行间距
    fileprivate let defaultEdgeInsets : UIEdgeInsets = UIEdgeInsetsMake(10, 10, 10, 10)
    /*懒加载创建存放属性的数组*/
    fileprivate lazy var attrs : [UICollectionViewLayoutAttributes] = []
    /// 列高度数组
    fileprivate lazy var columnHeights : [CGFloat] = []
    /// 内容高度
    fileprivate var contentHeight : CGFloat?
    
    fileprivate func columnCount() -> Int { // 列数
        if self.delegate != nil && (self.delegate?.responds(to: #selector(self.delegate?.hw_columnCountInWaterFlowLayout(layout:))))!{ // 判断代理是否实现 实现走代理方法
            return (self.delegate?.hw_columnCountInWaterFlowLayout!(layout: self))!
        }else{ // 没有实现走默认的
            return defaultColumnCount
        }
    }
    
    // MARK: - 列间距
    fileprivate func columnMargin() -> CGFloat {
        if self.delegate != nil && (self.delegate?.responds(to: #selector(self.delegate?.hw_columnMarginInWaterFlowLayout(layout:))))!{
            return (self.delegate?.hw_columnMarginInWaterFlowLayout!(layout: self))!
        }else{
            return defaultColumnMargin
        }
    }
    // MARK: - 行间距
    fileprivate func rowMargin() -> CGFloat {
        if self.delegate != nil && (self.delegate?.responds(to: #selector(self.delegate?.hw_rowMarginInWaterFlowLayout(layout:))))!{
            return (self.delegate?.hw_rowMarginInWaterFlowLayout!(layout: self))!
        }else{
            return defaultRowMargin
        }
    }
    // MARK: - 额外区域
    fileprivate func edgeInsets() -> UIEdgeInsets {
        if self.delegate != nil && (self.delegate?.responds(to: #selector(self.delegate?.hw_edgeInsetsInWaterFlowLayout(layout:))))!{
            return (self.delegate?.hw_edgeInsetsInWaterFlowLayout!(layout: self))!
        }else{
            return defaultEdgeInsets
        }
    }
    
    /// 准备所有view的layoutAttribute信息
    override func prepare() {
        super.prepare()
        
        if self.collectionView == nil { return }
        
        /// 清除列高度数组
        self.columnHeights.removeAll()
        /// 清除内容高度
        self.contentHeight = 0
        
        /// 把每组的额外滚动区域高度添加进去
        for  _ in 0 ..< self.columnCount() {
            self.columnHeights.append(self.edgeInsets().top)
        }
        /// 清除属性
        self.attrs.removeAll()
        /// 获取组数
        let count : Int = (self.collectionView?.numberOfItems(inSection: 0))!
        /// 获取宽度
        let width : CGFloat = (self.collectionView?.frame.size.width)!
        /// 获取列间距总和
        let colMagin = (CGFloat)(self.columnCount() - 1) * self.columnMargin()
        /// 计算cell宽度
        let cellWidth : CGFloat = (width - self.edgeInsets().left - self.edgeInsets().right - colMagin) / CGFloat(self.columnCount())
        
        for i in 0 ..< count {
            let indexPath : NSIndexPath = NSIndexPath(item: i, section: 0)
            let attr : UICollectionViewLayoutAttributes = UICollectionViewLayoutAttributes(forCellWith: indexPath as IndexPath)
            
            //获取高度
            let cellHeight : CGFloat =  (self.delegate?.hw_setCellHeght(layout: self, indexPath: indexPath as NSIndexPath, itemWidth: cellWidth))!
            /// 默认最小高度为第一组
            var minColumnHeight = self.columnHeights[0]
            var minColumn : Int = 0
            /// 筛选最小高度的组
            for i in 1 ..< self.columnCount() {
                let colHeight = self.columnHeights[i]
                if colHeight < minColumnHeight {
                    minColumnHeight = colHeight
                    minColumn = i
                }
            }
            /// 将下一个cell添加在最小高度的那一组
            let cellX : CGFloat = self.edgeInsets().left + CGFloat(minColumn) * (self.columnMargin() + cellWidth)
            var cellY = minColumnHeight
            if cellY != self.edgeInsets().top { // 如果不是第一次加入需要加上行间距
                cellY = self.rowMargin() + cellY
            }
            /// 设置frame
            attr.frame = CGRect(x: cellX, y: cellY, width: cellWidth, height: cellHeight)
            /// 那么当前的最大Y值就是新加的这个Cell的底部
            let maxY = cellY + cellHeight;
            
            /// 修改该组的列高度
            self.columnHeights[minColumn] = maxY
            /// 比较当前的最大高度是否是大于内容高度的
            let maxContentHeight = self.columnHeights[minColumn]
            if CGFloat(self.contentHeight!) < CGFloat(maxContentHeight) {
                /// 大于修改内容高度
                self.contentHeight = maxContentHeight
            }
            /// 添加属性数组
            self.attrs.append(attr)
        }
    }
    /// 返回属性数组
    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        return self.attrs
    }
    /// 返回内容高度
    override var collectionViewContentSize: CGSize {
        get {
            return CGSize(width: 0, height: CGFloat(self.contentHeight!) + CGFloat(self.edgeInsets().bottom))
        }
        set {
            self.collectionViewContentSize = newValue
        }
    }
}

Dome