设置公用属性

1 按钮的size

2. 列数

3. 列间隔

4. 边间距

//Item的size
@property (nonatomic, assign) CGSize itemSize;
//列数
@property (nonatomic, assign) NSUInteger numberOfColumns;
//列间隔
@property (nonatomic, assign) CGFloat insertItemOfSpacing;
//边间距
@property (nonatomic, assign) UIEdgeInsets sectionInsets;
//代理
@property (nonatomic, weak) id<WaterLayoutDelegate>delegate;

设置获取某个Item的代理方法

- (CGFloat)heightOfItemIndexPath:(NSIndexPath *)indexPath;

设置一些存储数组

1. 所有列的高度

2. 所有Item的frame

3. Item数量(NSInteger)

@property (nonatomic, strong) NSMutableArray *columsHeights;
@property (nonatomic, strong) NSMutableArray *itemAttr;
@property (nonatomic, assign) NSInteger numberOfItems;

实现方法

1. 求最短列的序号

#pragma mark 求最短列的列号
- (NSInteger)calcShortheight {
    //MAXFLOAT: 代表最大float值
    CGFloat shortestHeight = MAXFLOAT;
    NSInteger shortestIndex = 0;
    //遍历列数
    for (int i = 0; i < self.numberOfColumns; i++) {
        //获取当前列的高度 -- 数组中只能保存对象
        CGFloat height = [self.columsHeights[i] floatValue];
        //对比高度
        if (shortestHeight > height) {
            shortestHeight = height;
            shortestIndex = i;
        }
    }
    //返回高度最小的下标
    return shortestIndex;
}

2. 求列中高度最高的列号

#pragma mark 求列中高度最高的列号
- (NSInteger)calcLongestHeight {
    CGFloat maxHeight = 0;
    NSInteger longestIndex = 0;
    
    for (int i = 0; i < self.numberOfColumns; i++) {
        CGFloat height = [self.columsHeights[i] floatValue];
        if (maxHeight < height) {
            maxHeight = height;
            longestIndex = i;
        }
    }
    
    return longestIndex;
}

3. 初始化数据

初始化数组之类的. 同时初始化列高度

for (int i = 0; i < self.numberOfColumns; i++) {
        //利用字面量的方式将普通数据类型的变量类型转换能NSNumber对象并存储
        [self.columsHeights addObject:@(self.sectionInsets.top)];
    }

4. 重写perpareLayout(每个Item会调用)

4.1 调用父类的perpareLayout

[super prepareLayout];

4.2 调用数据初始化方法

[self initAllArray];

4.3 获取collectionView总所有的item

self.numberOfItems = [self.collectionView numberOfItemsInSection:0];

4.4 对item进行布局, 利用for循环遍历Item数组

计算最短列的长度

//获取当前最短列列号
        NSInteger shortestIndex = [self calcShortheight];
        //计算Item的Y值(最短列高加间距)
        CGFloat itemY = [self.columsHeights[shortestIndex] floatValue] + self.insertItemOfSpacing;
        //计算Item的X值
        //边距+(item宽+间隔)*列序号
        CGFloat itemX = self.sectionInsets.left + (self.itemSize.width + self.insertItemOfSpacing) * shortestIndex;
        
        //获取item的高度
        CGFloat itemHeight = 0;
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        //使用代理方法计算item的高度
        if (self.delegate && [self.delegate respondsToSelector:@selector(heightOfItemIndexPath:)]) {
            
            //利用代理获取Item的高度
            itemHeight = [self.delegate heightOfItemIndexPath:indexPath];

重新布局item

 //获取当前Item的布局属性
        UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        
        attr.frame = CGRectMake(itemX, itemY, self.itemSize.width, itemHeight);
        
        [self.itemAttr addObject:attr];
        
        //更新列的高度
        self.columsHeights[shortestIndex] = @(itemY + itemHeight);

5. 返回整个布局的contentSize(可滚动区域),

 即重写方法collectionViewContentSize

5.1 计算最高列的高度

//求最高列列号
    NSInteger longestIndex = [self calcLongestHeight];
    //计算contentSize的高度
    //最高列的高度+底部间距
    CGFloat contentHeight = [self.columsHeights[longestIndex] floatValue] + self.sectionInsets.bottom;

5.2 重新设置可滚动区域

CGSize contentSize = self.collectionView.bounds.size;
    contentSize.height = contentHeight;
//返回新的可滚动区域
return contentSize;

6. 返回所有Item的布局属性,重写layoutAttributesForElementsInRect

返回新的item布局数组

return self.itemAttr;

使用

在ViewController中初始化属性, 设置代理, 实现代理方法

- (WaterLayout *)getWaterLayout {
    WaterLayout *layout = [[WaterLayout alloc] init];
    //设置列数
    layout.numberOfColumns = 3;
    //设置边距
    layout.sectionInsets = UIEdgeInsetsMake(50, 10, 50, 10);
    //设置间距
    layout.insertItemOfSpacing = 10;
    //设置item大小
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    layout.itemSize = CGSizeMake((width - 40)/3, 100);
    
    layout.delegate = self;
    
    return layout;
}
#pragma mark 实现瀑布流的协议方法
- (CGFloat)heightOfItemIndexPath:(NSIndexPath *)indexPath{
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    //每个Item的宽度
    CGFloat subWidth = (width - 40) / 3;
    //求每个Item的高度
    NSDictionary *dict = self.dataArray[indexPath.row];
    CGFloat imageWidth = [dict[@"width"] floatValue];
    CGFloat imageHeight = [dict[@"height"] floatValue];
    
    return imageHeight/imageWidth * subWidth;
    
}