iOS瀑布流布局实现

最近开发中遇到了关于瀑布流布局的需求，所有就整理了一个瀑布流布局类，使用时只需要调整列数、行间距、列间距、上下左右边缘就可以做出各种需求的瀑布流布局，下面直接上代码：

自定义瀑布流需要继承UICollectionViewLayout布局类

.h文件

#import <UIKit/UIKit.h>

@interface ZYYWaterLayout :UICollectionViewLayout

@end

.m文件

#import "ZYYWaterLayout.h"

//默认的列数

staticconst CGFloat ZYYCollumCoutnt =3;

//列间距

staticconst CGFloat ZYYCollumMargin =10;

//行间距

staticconst CGFloat ZYYRowMargin =10;

//边缘间距

staticconst UIEdgeInsets ZYYEdgeUnsets = {10,10,10,10};

@interfaceZYYWaterLayout()

//用于存放cell属性的数组

@property (strong,nonatomic)NSMutableArray *attrsArray;

//用于存放所有列高度数组

@property (strong,nonatomic)NSMutableArray *maxH;

@end

@implementation ZYYWaterLayout

//懒加载属性数组

- (NSMutableArray *)attrsArray{

    if (_attrsArray ==nil) {

        _attrsArray = [NSMutableArrayarray];

        

    }

    return_attrsArray;

}

//懒加载高度属性数组

- (NSMutableArray *)maxH{

    if (_maxH ==nil) {

        _maxH = [NSMutableArrayarray];

        

    }

    return_maxH;

}

//准备布局每次刷新都会调用此方法

- (void)prepareLayout{

    [superprepareLayout];

    

   //先清除以前计算的所有高度，这种做法比较严谨，如果有下拉刷新，不及时清空数组的话会造成数据混乱

    [self.maxHremoveAllObjects];

    

   //这里先将数组里面的初始值设为0

    for (NSInteger i =0; i < ZYYCollumCoutnt; i ++) {

        [self.maxHaddObject:@0];

    }

     NSLog(@"%s",__func__);

   //清除以前的所有属性

    [self.attrsArrayremoveAllObjects];

   //开始创建每个cell对应的布局属性

    //1、获取collectionView里面的有多少个item

    NSInteger count = [self.collectionViewnumberOfItemsInSection:0];

    

    //创建多少collectionViewcell属性

    for (NSInteger i=1; i<count; i++) {

        //获取item对应的indexPath

        NSIndexPath *indexPath = [NSIndexPathindexPathForItem:i inSection:0];

        

        //创建属性调用下面的layoutAttributesForItemAtIndexPath方法

        UICollectionViewLayoutAttributes *attrs = [selflayoutAttributesForItemAtIndexPath:indexPath];

        //设置cell的属性直接调用layoutAttributesForItemAtIndexPath方法即可

        

        [self.attrsArrayaddObject:attrs];

    }

    

}

/**

 * 决定布局的关键所在

 *

 *  @param rect 属性rect

 *

 *  @return 返回属性数组

 */

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{

    

    NSLog(@"%s",__func__);

    returnself.attrsArray;

}

/**

 *  返回indexPath位置cell对应的布局属性

 * 这个方法是核心算法

 */

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{

    //创建属性

    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:indexPath];

    

    //collectionView的宽度

    CGFloat collectionViewW =self.collectionView.frame.size.width;

    

    //列号

    NSInteger cloumIndex =0;

   //默认第一行是最小的，这样做的话可以让下面的for循环从i=1开始遍历，这样做可以优化性能

    CGFloat minClumnHeight = [self.maxH[0]doubleValue];

    

    for (NSInteger i =1; i < ZYYCollumCoutnt; i++) {

        //取出第i列元素的y值

        CGFloat cheight = [self.maxH[i]doubleValue];

        if (minClumnHeight > cheight) {

            minClumnHeight = cheight;

            cloumIndex = i;

        }

    }

    

    //每个item的宽度 == （collectionView的宽度 -左边距 -右边距 -（列数-1）*间距）再除于列数

    CGFloat w = (collectionViewW -ZYYEdgeUnsets.left -ZYYEdgeUnsets.right - (ZYYCollumCoutnt -1) * ZYYCollumMargin)/3.0;

    

   //高度这里用的是随机数，做项目时根据的是素材的高度

    CGFloat h =50 + arc4random_uniform(100);

    

    //x可以根据列来算

    CGFloat x =ZYYEdgeUnsets.left + cloumIndex * (ZYYRowMargin + w);

    //y最小itme值计算

    CGFloat y = minClumnHeight +ZYYRowMargin;

 

    //设置布局属性的frame，这个frame是最终item的frame

     attrs.frame =CGRectMake(x, y, w, h);

   //更新最短那列的高度

    self.maxH[cloumIndex] =@(CGRectGetMaxY(attrs.frame));

    

    return attrs;

}

//尺寸

- (CGSize)collectionViewContentSize{

    

   //找出y值最大的的那一列，和上面找出最小高度相似

    CGFloat maxColunmHeight = [self.maxH[0]doubleValue];

    for (NSInteger i =1; i < ZYYCollumCoutnt; i++) {

        CGFloat my = [self.maxH[i]doubleValue];

        if (maxColunmHeight < my) {

            maxColunmHeight = my;

        }

    }

    

    returnCGSizeMake(0, maxColunmHeight +ZYYEdgeUnsets.bottom);

}

结语：上面的注释比较清楚，用的时候直接将代码复制粘贴就可以使用了

@end