如何自己实现瀑布流效果

前言

说到瀑布流，淘宝，京东等都用到这样的效果，当然，网上有很多现成的demo，但是如果自己不写一个出来，你永远不知道它是怎么实现的。之前有人 用UIScrollView写过瀑布流，但是这个设计到内存，重用等问题，因为瀑布流可能有很多东西，所以首选当然是UICollectionView了。我们知道，UICollectionViewCell布局等时用UICollectionViewFlowLayout来控制的，所以想用UICollectionView实现瀑布流其实也不难，主要来重写UICollectionViewFlowLayout一些方法，然后做自己的操作就可以了。

正题

1、要实现瀑布流，需要重写UICollectionViewFlowLayout一些方法，以下4个方法是确定布局信息的：

- (void)prepareLayout
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
- (CGSize)collectionViewContentSize

这几个方法的意思：

• (void)prepareLayout：UICollectionView在布局的时候，会调用该方法。当然在布局失效重新布局的时候，同样会调用的。
• layoutAttributesForElementsInRect：返回需要布局的属性，主要是一个数组，也就是所有cell的布局属性
• layoutAttributesForItemAtIndexPath：根据需要为特定的cell，制定布局。也就是可以为每一个cell布局不同的属性，如果需要的话。
• collectionViewContentSize：视图内容的宽高

2、具体实现：继承UICollectionViewFlowLayout，并重新实现这几个方法。
(1)、先看下.h文件：

@protocol SWaterFlowLayoutDelegate<NSObject>

- (CGFloat)itemHeightWithlayout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;

@end
@interface WaterFlowLayout : UICollectionViewFlowLayout
@property (nonatomic, assign)id <SWaterFlowLayoutDelegate>delegateFlow;
/**
 列数 默认：2
 */
@property (nonatomic, assign) NSInteger column;
/**
 列间距 默认 1px
 */
@property (nonatomic, assign) CGFloat columnSpacing;
/**
 行间距 默认 1px
 */
@property (nonatomic, assign) CGFloat rowSpacing;
@end

这个里面，定义了代理，列数，列间距和行间距（根据需求还可以定义更多）。代理主要是为了获取每个cell的高度，瀑布流是有列的概念的，需要知道要多少列，默认是2列。列间距和行间距就很简单了。
(2)、在看下在.m文件中，4个方法是怎么实现的。
a. prepareLayout方法：

- (void)prepareLayout
{
    [super prepareLayout];
    [self.columnHeightDic removeAllObjects];
    for (NSInteger i = 0; i < self.column; i ++ ) {
        [self.columnHeightDic setObject:@(0) forKey:@(i)];
    }
    [self.attArr removeAllObjects];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < count; i ++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes *layoutAtt = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attArr addObject:layoutAtt];
    }
    
}

这个方法是在视图布局的时候调用，因此在这个里面，我们可以获取cell配置。self.columnHeightDic是为了存储每一列的高度，以便查找最短的那一列。self.attArr这个是为了存储布局内容。所有的布局属性都在这里。
b. layoutAttributesForElementsInRect方法

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.attArr;
}

这个就简单了，把需要布局的属性数组返回给系统。
c. layoutAttributesForItemAtIndexPath方法：

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *layoutAtt = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    CGFloat width = self.collectionView.frame.size.width;
    CGFloat itemWidth = (width - self.sectionInset.left - self.sectionInset.right - (self.column - 1) * self.columnSpacing) / self.column;
    CGFloat itemHeight = DefaultItemHeight;
    CGFloat itemX = 0.0;
    CGFloat itemY = 0.0;
    if ([self.delegateFlow respondsToSelector:@selector(itemHeightWithlayout:sizeForItemAtIndexPath:)]) {
        itemHeight = [self.delegateFlow itemHeightWithlayout:self sizeForItemAtIndexPath:indexPath];
    }
    //找到最短的列
    __block NSNumber *minColumn = @0;
    [self.columnHeightDic enumerateKeysAndObjectsUsingBlock:^(NSNumber *key, NSNumber *obj, BOOL *stop) {
        if ([self.columnHeightDic[minColumn] floatValue] > obj.floatValue) {
            minColumn = key;
        }
    }];
    CGFloat oldHeight = [self.columnHeightDic[minColumn] doubleValue];
    if (indexPath.row <= self.column - 1) {//第一行
        itemY = oldHeight + self.sectionInset.top;
    }else{
        itemY =  oldHeight + self.rowSpacing;
    }
    itemX = [minColumn integerValue] * (itemWidth+ self.columnSpacing) + self.sectionInset.left;
    
    [self.columnHeightDic setObject:@(itemHeight + itemY) forKey:minColumn];

    layoutAtt.frame = CGRectMake(itemX, itemY, itemWidth, itemHeight);

    CGFloat columnHeight = [self.columnHeightDic[minColumn] doubleValue];
    if (self.contentHeight < columnHeight) {
        self.contentHeight = columnHeight;
    }
    return layoutAtt;
}

这个方法是核心代码，主要是改变cell的frame。创建一个布局对象UICollectionViewLayoutAttributes，然后配置对象的frame就可以了。有什么不明白的，可以交流交流。
d. collectionViewContentSize方法：

- (CGSize)collectionViewContentSize
{
    return CGSizeMake(0, self.contentHeight + self.sectionInset.bottom);
}

这个返回内容宽高就OK的

这样一来，一个完美的瀑布流效果就实现了。当然，要想做更好效果，都是在这个四个方法里面做的。demo传送门