前言：
忙里偷闲，忽然想起以前自己实现的一个瀑布流功能，就拿出来完善了下；说起这个瀑布流，还是在以前自己还是iOS开发小白的时候，学习来的，后来我自己动手模仿苹果API里自带的布局类写法，重新实现了下，方便大家可以更熟悉的使用，话不多说，进入正题。
一、准备
1、首先准备好plist文件，以及需要用到的工具类，工具类可以自己下载导入，也可以cocoapods导入
1533266010749.jpg
1533266033205.jpg
1533266147661.jpg
1533266173431.jpg
2、接着创建我们的布局类WaterFallFlowLayout，继承于UICollectionViewLayout，既然是模仿，那我们就要设定好对应的属性和代理方法，如下图:
1533266493595.jpg
以及我们的数组和初始化
1533266583321.jpg
二、实现
实现自定义布局，我们需要实现布局类里的四个方法，如下：
1、- (void)prepareLayout {......}
具体实现代码如下
//初始化加载，每次刷新也都会加载
- (void)prepareLayout {
[super prepareLayout];
//刷新时清空item属性数组
[self.attributes removeAllObjects];
//刷新时清空列高数组
[self.itemHeights removeAllObjects];
//添加每列的默认起始高度
for (int i = 0; i < kScreenWidth/self.itemWidth; i++) {
[self.itemHeights addObject:@(self.minimumLineSpacing + self.headerReferenceSize.height + self.sectionInset.top)];
}
//获取collectionView的所有区数量
NSUInteger sectionCount = [self.collectionView numberOfSections];
//获取collectionView的所有单元格数量
for (int i = 0; i < sectionCount; i++) {
//获取每个区的单元格数量
NSUInteger itemCount = [self.collectionView numberOfItemsInSection:i];
for (int j = 0; j < itemCount; j++) {
//得到每个单元格布局属性
UICollectionViewLayoutAttributes *attribute = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:j inSection:i]];
//添加进布局属性数组中
[self.attributes addObject:attribute];
}
}
}
2、- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {......}
具体实现代码如下：
//返回每个单元格的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
//创建每个单元格的布局属性
UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//计算高height
CGFloat height = 0;
if (self.delegate) {
height = [self.delegate waterFallFlowLayout:self heightForItemAtIndexPath:indexPath width:self.itemWidth];
}
//计算坐标x和y,需要找到最小的列高值和列号，所以需要一个数组来存放所有的列高
//声明一个列号代表我们需要寻找的最小的列高值,默认为0
NSUInteger minColumn = 0;
//声明一个最小的列高值，获取第0列的列高值，默认为最小的
CGFloat minItemHeight = [self.itemHeights[0] floatValue];
//for循环寻找最小的列高值和列号
for (int i = 1; i < kScreenWidth/self.itemWidth; i++) {
CGFloat itemHeight = [self.itemHeights[i] floatValue];
if (itemHeight < minItemHeight) {
minItemHeight = itemHeight;
minColumn = i;
}
}
//for循环结束，最小的列号和列高值就确定了，此时先计算坐标x
CGFloat x = self.sectionInset.left + minColumn * self.minimumInteritemSpacing + minColumn * self.itemWidth;
//此时坐标y也就确定了
CGFloat y;
//获得列数
NSUInteger columnCount = kScreenWidth/self.itemWidth;
if (indexPath.item/columnCount == 0) {
if (indexPath.section == 0) {
y = self.headerReferenceSize.height + minItemHeight;
} else {
y = minItemHeight;
}
} else {
y = self.minimumLineSpacing + minItemHeight;
}
//设置每个单元格的大小
attribute.frame = CGRectMake(x, y, self.itemWidth, height);
//更新列高数组中的的高度
self.itemHeights[minColumn] = @(CGRectGetMaxY(attribute.frame));
return attribute;
}
3、第三个方法比较简单，直接贴代码
//返回布局属性数组
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.attributes;
}
4、- (CGSize)collectionViewContentSize {......}
具体实现代码如下：
//返回集合视图内容大小
- (CGSize)collectionViewContentSize {
CGFloat maxItemHeight = [self.itemHeights[0] floatValue];
for (int i = 1; i < kScreenWidth/self.itemWidth; i++) {
CGFloat height = [self.itemHeights[i] floatValue];
if (maxItemHeight < height) {
maxItemHeight = height;
}
}
CGFloat collectionViewHeight = maxItemHeight + self.headerReferenceSize.height + self.footerReferenceSize.height + self.sectionInset.bottom;
return CGSizeMake(kScreenWidth, collectionViewHeight);
}
三、运行
主界面添加上集合视图，实现功能，具体使用很简单，就不多说，直接上运行结果，如下图：
1533267511446.jpg
大功告成！
四、最后
附上demo：WaterFallFlowLayout
