UICollectionView自定义layout如何实现？ 比如瀑布流

实现UICollectionView自定义layout的方法：自定义一个类继承自UICollectionViewLayout类，重写下面方法：

//collectionview的内容尺寸
- (CGSize)collectionViewContentSize;

- (void)prepareLayout;

//返回所有元素的布局属性
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

//返回对应indexPath的cell的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

//返回对应于indexPath追加视图的布局属性，如果没有追加视图可不重载
- (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;

//返回对应于indexPath装饰视图的布局属性，如果没有追加视图可不重载
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;

//当边界发生改变时，是否应该刷新布局。如果YES则在边界变化（一般是scroll到其他地方）时，将重新计算需要的布局信息。
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;

自定义一个类WaterfallCollectionViewLayout继承自UICollectionViewLayout类    重写上面方法实现瀑布流布局

#import "WaterfallCollectionViewLayout.h"


//行距
static const CGFloat rowMargin = 10;
//列距
static const CGFloat columnMargin = 10;

static const UIEdgeInsets insets = {10, 10, 10, 10};

//列数
static const int columns = 3;

@interface WaterfallCollectionViewLayout()

//每一列的最大Y值
@property (nonatomic, strong) NSMutableArray *columnsMaxYarray;

//存放所有cell的布局属性
@property (nonatomic, strong) NSMutableArray *cellAttrisArray;

@end

@implementation WaterfallCollectionViewLayout

//懒加载
- (NSMutableArray *)columnsMaxYarray {
    if (!_columnsMaxYarray) {
        _columnsMaxYarray = [NSMutableArray array];
    }
    return _columnsMaxYarray;
}
- (NSMutableArray *)cellAttrisArray {
    if (!_cellAttrisArray) {
        _cellAttrisArray = [NSMutableArray array];
    }
    return _cellAttrisArray;
}


//collectionview的内容尺寸
- (CGSize)collectionViewContentSize {
    CGFloat maxY = [self.columnsMaxYarray[0] doubleValue];
    for (int i = 0; i < self.columnsMaxYarray.count; i++) {
        CGFloat columnY = [self.columnsMaxYarray[i] doubleValue];
        if (maxY < columnY) {
            maxY = columnY;
        }
    }
    return CGSizeMake(10, maxY + insets.bottom);
}


- (void)prepareLayout {
    [super prepareLayout];
    
    //重置每一列的最大Y值
    [self.columnsMaxYarray removeAllObjects];
    for (int i = 0; i < columns; i++) {
        [self.columnsMaxYarray addObject:@(insets.top)];
    }
    
    //计算所有cell的布局属性
    [self.cellAttrisArray removeAllObjects];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < count; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
        UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.cellAttrisArray addObject:attributes];
    }
}


//返回所有元素的布局属性
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    return self.cellAttrisArray;
}

//返回对应indexPath的cell的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    //水平方向总间距
    CGFloat xMargin = insets.left + insets.right + (columns - 1)*columnMargin;
    //cell的宽度
    CGFloat w = (_totalWidth - xMargin)/columns;
    
    //cell?的高度
    CGFloat h = 50 + arc4random_uniform(150);
    
    //找最短的列号  和高度值
    CGFloat minY = [self.columnsMaxYarray[0] doubleValue];
    NSInteger minColumn = 0;
    for (int i = 0; i < self.columnsMaxYarray.count; i++) {
        CGFloat columnMaxY = [self.columnsMaxYarray[i] doubleValue];
        
        if (minY > columnMaxY) {
            minY = columnMaxY;
            minColumn = i;
        }
    }
   
   //cell的x值
    CGFloat x = insets.left + minColumn * (w + columnMargin);
    //cell的y值
    CGFloat y = minY + rowMargin;
    
    //cell的frame
    attribute.frame = CGRectMake(x, y, w, h);
    
    self.columnsMaxYarray[minColumn] = @(CGRectGetMaxY(attribute.frame));
    
    return attribute;
}



@end

调用

WaterfallCollectionViewLayout *layout = [[WaterfallCollectionViewLayout alloc]init];
    layout.totalWidth = 375;
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 375, 667) collectionViewLayout:layout];

效果