前言：

忙里偷闲，忽然想起以前自己实现的一个瀑布流功能，就拿出来完善了下；说起这个瀑布流，还是在以前自己还是iOS开发小白的时候，学习来的，后来我自己动手模仿苹果API里自带的布局类写法，重新实现了下，方便大家可以更熟悉的使用，话不多说，进入正题。

一、准备

1、首先准备好plist文件，以及需要用到的工具类，工具类可以自己下载导入，也可以cocoapods导入

1533266010749.jpg
1533266033205.jpg
1533266147661.jpg
1533266173431.jpg

2、接着创建我们的布局类WaterFallFlowLayout，继承于UICollectionViewLayout，既然是模仿，那我们就要设定好对应的属性和代理方法，如下图:

1533266493595.jpg

以及我们的数组和初始化

1533266583321.jpg

二、实现

实现自定义布局，我们需要实现布局类里的四个方法，如下：
1、- (void)prepareLayout {......}
具体实现代码如下

//初始化加载，每次刷新也都会加载
- (void)prepareLayout {
    [super prepareLayout];
    //刷新时清空item属性数组
    [self.attributes removeAllObjects];
    //刷新时清空列高数组
    [self.itemHeights removeAllObjects];
    //添加每列的默认起始高度
    for (int i = 0; i < kScreenWidth/self.itemWidth; i++) {
        [self.itemHeights addObject:@(self.minimumLineSpacing + self.headerReferenceSize.height + self.sectionInset.top)];
    }
    //获取collectionView的所有区数量
    NSUInteger sectionCount = [self.collectionView numberOfSections];
    //获取collectionView的所有单元格数量
    for (int i = 0; i < sectionCount; i++) {
        //获取每个区的单元格数量
        NSUInteger itemCount = [self.collectionView numberOfItemsInSection:i];
        for (int j = 0; j < itemCount; j++) {
            //得到每个单元格布局属性
            UICollectionViewLayoutAttributes *attribute = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:j inSection:i]];
            //添加进布局属性数组中
            [self.attributes addObject:attribute];
        }
    }
    
}

2、- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {......}
具体实现代码如下：

//返回每个单元格的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    //创建每个单元格的布局属性
    UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    //计算高height
    CGFloat height = 0;
    if (self.delegate) {
        height = [self.delegate waterFallFlowLayout:self heightForItemAtIndexPath:indexPath width:self.itemWidth];
    }
    //计算坐标x和y,需要找到最小的列高值和列号，所以需要一个数组来存放所有的列高
    //声明一个列号代表我们需要寻找的最小的列高值,默认为0
    NSUInteger minColumn = 0;
    //声明一个最小的列高值，获取第0列的列高值，默认为最小的
    CGFloat minItemHeight = [self.itemHeights[0] floatValue];
    //for循环寻找最小的列高值和列号
    for (int i = 1; i < kScreenWidth/self.itemWidth; i++) {
        CGFloat itemHeight = [self.itemHeights[i] floatValue];
        if (itemHeight < minItemHeight) {
            minItemHeight = itemHeight;
            minColumn = i;
        }
    }
    //for循环结束，最小的列号和列高值就确定了，此时先计算坐标x
    CGFloat x = self.sectionInset.left + minColumn * self.minimumInteritemSpacing + minColumn * self.itemWidth;
    //此时坐标y也就确定了
    CGFloat y;
    //获得列数
    NSUInteger columnCount = kScreenWidth/self.itemWidth;
    if (indexPath.item/columnCount == 0) {
        if (indexPath.section == 0) {
            y = self.headerReferenceSize.height + minItemHeight;
        } else {
            y = minItemHeight;
        }
    } else {
        y = self.minimumLineSpacing + minItemHeight;
    }
    //设置每个单元格的大小
    attribute.frame = CGRectMake(x, y, self.itemWidth, height);
    //更新列高数组中的的高度
    self.itemHeights[minColumn] = @(CGRectGetMaxY(attribute.frame));
    return attribute;
}

3、第三个方法比较简单，直接贴代码

//返回布局属性数组
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.attributes;
}

4、- (CGSize)collectionViewContentSize {......}
具体实现代码如下：

//返回集合视图内容大小
- (CGSize)collectionViewContentSize {
    CGFloat maxItemHeight = [self.itemHeights[0] floatValue];
    for (int i = 1; i < kScreenWidth/self.itemWidth; i++) {
        CGFloat height = [self.itemHeights[i] floatValue];
        if (maxItemHeight < height) {
            maxItemHeight = height;
        }
    }
    CGFloat collectionViewHeight = maxItemHeight + self.headerReferenceSize.height + self.footerReferenceSize.height + self.sectionInset.bottom;
    return CGSizeMake(kScreenWidth, collectionViewHeight);
}

三、运行

主界面添加上集合视图，实现功能，具体使用很简单，就不多说，直接上运行结果，如下图：

1533267511446.jpg

大功告成！

四、最后

附上demo：WaterFallFlowLayout