瀑布流的实现原理

瀑布流的实现不同的人有不同的方法，个人认为最靠谱的莫过于用UICollectionView来实现，只要明白其中的思想实现起来先就非常简单了，其实博主也是在网上看别人写的demo，下载下来研究弄明白的，给大家展示一下效果图。

第一步、自定义UICollectionViewLayout，在.h文件中定义协议，协议方法有下面四个。

@class CustomCollectionViewLayout;
@protocol CustomCollectionViewLayoutDelegate <NSObject>
@required
/**
 *  @brief 每个cell之间的间距
 */
-(NSInteger)CustomCollectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout marginOfCellWithCollectionView:(UICollectionView *)collectionView;
/**
 *  @brief cell的最小高度
 */
-(NSInteger)CustomCollectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout minHeightOfCellWithCollectionView:(UICollectionView *)collectionView;
/**
 *  @brief cell的最大高度
 */
-(NSInteger)CustomCollectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout maxrOfCellWithCollectionView:(UICollectionView *)collectionView;
/**
 *  @brief 行数
 */
-(NSInteger)CustomCollectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout numberOfColumnWithCollectionView:(UICollectionView *)collectionView;
@end

第二步、在.m文件中定义属性，实现协议方法

@interface CustomCollectionViewLayout ()
@property (nonatomic,assign) NSInteger numberOfSections;//section的数量
@property (nonatomic,assign) NSInteger  numberOfCellInSections;//section中cell的数量
@property (nonatomic,assign) NSInteger  columnCount;//行数
@property (nonatomic,assign) NSInteger  margin;//cell之间的间距
@property (nonatomic,assign) NSInteger  cellMinHeight;//cell的最小高度
@property (nonatomic,assign) NSInteger  cellMaxHeight;//cell的最大高度
@property (nonatomic,assign) NSInteger  cellWidth;//cell的宽度
@property (nonatomic,strong) NSMutableArray * cellHeightArray;//存储每个cell的随机高度
@property (nonatomic,strong) NSMutableArray * cellXArray;//存储每列cell的X坐标
@property (nonatomic,strong) NSMutableArray * cellYArray;//存储每列cell的最新cell的Y坐标
@end

- (void)initCustonCollectionViewLayoutDate{
    _numberOfSections = [self.collectionView numberOfSections];
    _numberOfCellInSections = [self.collectionView numberOfItemsInSection:0];
    _margin = [_delegate CustomCollectionViewLayout:self marginOfCellWithCollectionView:self.collectionView];
    _columnCount = [_delegate CustomCollectionViewLayout:self numberOfColumnWithCollectionView:self.collectionView];
    _cellMinHeight = [_delegate CustomCollectionViewLayout:self minHeightOfCellWithCollectionView:self.collectionView];
    _cellMaxHeight = [_delegate CustomCollectionViewLayout:self maxrOfCellWithCollectionView:self.collectionView];
}

第三步、重写prepareLayout方法，在这个方法中我们要初始化一些数据

/**
 *  @brief 预加载layout，只会被执行一次
 */
- (void)prepareLayout{
    [super prepareLayout];
    [self initCustonCollectionViewLayoutDate];
    [self initCustonCollectionViewLayoutCellWidth];
    [self initCustonCollectionViewLayoutCellHeight];
}

第四步、实现核心方法，就是为每一个cell绑定一个Layout属性

-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    [self initCellYArray];
    NSMutableArray * array = [NSMutableArray array];
    for (int i = 0; i < _numberOfCellInSections; i ++) {
        NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes * attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
        [array addObject:attributes];
    }
    return array;
}
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewLayoutAttributes * attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    CGRect frame = CGRectZero;
    CGFloat cellHeight = [[_cellHeightArray objectAtIndex:indexPath.row] floatValue];
    NSInteger minYIndex = [self selectMinIndexWithArray:_cellYArray];
    CGFloat X = [[_cellXArray objectAtIndex:minYIndex] floatValue];
    CGFloat Y = [[_cellYArray objectAtIndex:minYIndex] floatValue];
    frame = CGRectMake(X, Y, _cellWidth, cellHeight);
    _cellYArray[minYIndex] = @(Y + cellHeight + _margin);//更新相应的Y坐标
    attributes.frame = frame;//计算每个cell的位置
    return attributes;
}

第五步、集成。如果是用StoryBoard拖得可能稍微简单一点，当然代码书写也不难。拿到代理，实现代理方法就行。

#pragma mark --- CustomCollectionViewLayoutDelegate
-(NSInteger)CustomCollectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout marginOfCellWithCollectionView:(UICollectionView *)collectionView{
    return 2;
}
-(NSInteger)CustomCollectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout maxrOfCellWithCollectionView:(UICollectionView *)collectionView{
    return 150;
}
-(NSInteger)CustomCollectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout minHeightOfCellWithCollectionView:(UICollectionView *)collectionView{
    return 100;
}
-(NSInteger)CustomCollectionViewLayout:(CustomCollectionViewLayout *)collectionViewLayout numberOfColumnWithCollectionView:(UICollectionView *)collectionView{
    return 2;
}

注意点：如果是用StoryBoard拖一定注意cell的重用、Layout的指定（因为我们自定义了UICollectionViewLayout）；代码是实现的话就需要细心一点儿就ok。

代码传送门:https://github.com/fuzongjian/WaterFall.git