前言
说到瀑布流，淘宝，京东等都用到这样的效果，当然，网上有很多现成的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传送门
