实现简单瀑布流布局(一)

关于瀑布流布局网上很多人都写了, 但是自己封装一个, 可控性更高, 故自己写一个, 以后的项目可以直接拖进去使用.

效果图如下:

我是gif图 Paste_Image.png

实现思路如下(具体代码可到文章结尾处链接里下载demo):

1.继承系统的flowLayout自定义一个flowLayout, 重写三个方法.
// 在这个方法里面设置好所有cell的布局
. - (void)prepareLayout;
// 在这个方法里面告诉系统已设置好的布局
. - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;
// 在这个方法里面设置滚动区域
. - (CGSize)collectionViewContentSize;

2.重点是在prepareLayout里面, 写布局代码:
记录每一列的最大高度(从上到下), 我用数组来记录. 然后选出高度最小的那一列, 把下一个cell添加到该列下面.再记录每一列的最大高度, 把下一个cell添加到高度最小的那一列下面, 依次类推, 实现瀑布流.

使用方法:

把demo里面的JWWaterFallLayout文件夹直接拖到你的项目即可.

导入JWWaterFallLayout.h后用JWWaterFallLayout来创建collection view,
该layout额外提供了col属性来设置列数(根据列数自动计算cell宽),
该layout额外提供了数据源<JWWaterFallLayoutDataSource>方法来设置每个cell的高度(可根据index来设置对应第几个的cell高度)

示例代码:

JWWaterFallLayout *layout = [[JWWaterFallLayout alloc] init];
layout.minimumLineSpacing = 10;
layout.minimumInteritemSpacing = 10;
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
layout.col = 4; // 设置列数
layout.dataSource = self; // 设置数据源
        
_collectionV = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

#pragma mark - JWWaterfallLayout DataSource
// 设置每个cell的高度
- (CGFloat)waterfallLayoutWithLayout:(JWWaterFallLayout *)layout itemIndex:(NSInteger)index{
    
    return arc4random_uniform(100) + 150;
}

Demo下载地址(希望路过顺手star一个嘻嘻):
https://github.com/imbawales/JWWaterfallLayout