iOS-CollectionView 瀑布流视图

要做瀑布流，首先要清楚几点：

主要是对 UICollectionViewLayout 子类的编写。

第一步、自定义初始化（主要是参数的初始化，行数numberOfLine，行间距rowGap，列间距lineGap，边距sideGap）

第二步、prepareLayout（1.初始化每列高度的字典，2初始化属性数组。）

第三步、layoutAttributesForElementsInRect（返回属性数组。）

第四步、collectionViewContentSize （返回整个 collectionView 的尺寸。）

以下为源代码：

UICollectionViewLayout 子类 WaterLayout

//
//  WaterLayout.h
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//

#import <UIKit/UIKit.h>

//计算高度
typedef CGFloat(^HeightBlock)(NSIndexPath *indexPath, CGFloat width);

@interface WaterLayout : UICollectionViewLayout
@property(nonatomic, assign) NSInteger lineNumber; //每行个数
@property(nonatomic, assign) CGFloat rowGap;    //行距（上下的距离）
@property(nonatomic, assign) CGFloat lineGap;   //列距（中间的距离）
@property(nonatomic, assign) UIEdgeInsets sideGap;  //边距

@property(nonatomic, copy) HeightBlock block;   //计算cell 高度

-(instancetype)initWithLineNumber:(NSInteger)lineNumber rowGap:(CGFloat)rowGap lineGap:(CGFloat)lineGap sideGap:(UIEdgeInsets)sideGap;

@end

//
//  WaterLayout.m
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//

#import "WaterLayout.h"

@interface WaterLayout()
//1.存储每列高度的一个字典
@property(nonatomic, strong) NSMutableDictionary *dictOfLineHeight;
//2.存储所有cell frame 的一个数组
@property(nonatomic, strong) NSMutableArray *arrayOfCellFrame;
@end

@implementation WaterLayout

-(instancetype)initWithLineNumber:(NSInteger)lineNumber rowGap:(CGFloat)rowGap lineGap:(CGFloat)lineGap sideGap:(UIEdgeInsets)sideGap{
    self = [super init];
    if (self) {
        self.lineNumber = lineNumber;
        self.rowGap = rowGap;
        self.lineGap = lineGap;
        self.sideGap = sideGap;
        self.dictOfLineHeight = [NSMutableDictionary dictionary];
        self.arrayOfCellFrame = [NSMutableArray array];
    }
    return self;
}

//自动布局前的准备工作
- (void)prepareLayout{
    //1.要把存储高度的字典补充值
    for (NSInteger i = 0; i < _lineNumber; i++) {
        [self.dictOfLineHeight setObject:@(self.sideGap.top) forKey:[NSString stringWithFormat:@"%ld",i]];
    }
    //2.把cell 的尺寸存进数组
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i=0; i<count; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        [_arrayOfCellFrame addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
    }
}
//返回所以cell frame 信息的数组
- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{
    return _arrayOfCellFrame;
}
//计算每个cell 的 frame 值
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    //经过了逻辑处理，计算出了cell 的frame
    CGRect frame;
    CGFloat cellW = (self.collectionView.bounds.size.width - _sideGap.left - _sideGap.right - self.lineGap*(self.lineNumber - 1))/self.lineNumber;
    CGFloat cellH;
    if (self.block) {
        cellH = self.block(indexPath,cellW);
    }
    __block NSString *keyOfMinHeight = @"0";
    [_dictOfLineHeight enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if ([_dictOfLineHeight[keyOfMinHeight] floatValue] > [obj floatValue]) {
            keyOfMinHeight = key;
        }
    }];
    NSInteger minHeiLineNumber = [keyOfMinHeight integerValue];
    CGFloat pointX = (self.sideGap.left + minHeiLineNumber * (self.lineGap + cellW));
    CGFloat pointY = [_dictOfLineHeight[keyOfMinHeight] floatValue];
    frame = CGRectMake(pointX, pointY, cellW, cellH);
    //更新高度
    _dictOfLineHeight[keyOfMinHeight] = @([_dictOfLineHeight[keyOfMinHeight] floatValue] + cellH + self.rowGap);

    attr.frame = frame;
    return attr;
}
//返回 集合视图的宽高
- (CGSize)collectionViewContentSize{
    __block NSString *keyOfMaxHeight = @"0";
    [_dictOfLineHeight enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if ([_dictOfLineHeight[keyOfMaxHeight] floatValue] < [obj floatValue]) {
            keyOfMaxHeight = key;
        }
    }];
    return CGSizeMake(self.collectionView.bounds.size.width, [_dictOfLineHeight[keyOfMaxHeight] floatValue]);
}

@end

MyCollectionViewCell 用 xib 定义的，里面放有一张添加好约束的图片。

//
//  MyCollectionViewCell.h
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface MyCollectionViewCell : UICollectionViewCell
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property(nonatomic, strong) NSString* imageName;
@end

//
//  MyCollectionViewCell.m
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//

#import "MyCollectionViewCell.h"

@implementation MyCollectionViewCell

- (void)awakeFromNib {
    [super awakeFromNib];
    // Initialization code
}

-(void)setImageName:(NSString *)imageName{
    _imageView.image = [UIImage imageNamed:imageName];
}
@end

DetailsViewController 展示瀑布流视图

//
//  DetailsViewController.m
//  WaterFallLayout2
//
//  Created by zhengbing on 6/30/16.
//  Copyright © 2016 zhengbing. All rights reserved.
//

#import "DetailsViewController.h"
#import "MyCollectionViewCell.h"
#import "WaterLayout.h"

#define CELLID @"DetailsViewController"


@interface DetailsViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
@property(nonatomic, strong)NSMutableArray * dataSource;
@property(nonatomic, strong)UICollectionView * collectionView;

@end

@implementation DetailsViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self initData];
    [self initUI];
}
-(void)initData{
    _dataSource = [NSMutableArray array];
    for (int i = 0; i < 20; i++) {
        NSString *imageName = [NSString stringWithFormat:@"%d",i+1];
        [_dataSource addObject:imageName];
    }
}
-(void)initUI{
    self.view.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:self.collectionView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark getter and setter
-(UICollectionView *)collectionView{
    if (!_collectionView) {

        //瀑布流布局
        WaterLayout *layout = [[WaterLayout alloc] initWithLineNumber:3 rowGap:10 lineGap:10 sideGap:UIEdgeInsetsMake(10, 10, 10, 10)];
        //block 回调，计算并返回每个 cell 图片的高度
        layout.block = ^CGFloat(NSIndexPath *indexPath, CGFloat width){
            UIImage *image = [UIImage imageNamed:_dataSource[indexPath.item]];
            return (image.size.height/image.size.width)*width;
        };
        _collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];

        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.backgroundColor = [UIColor yellowColor];
        [_collectionView registerNib:[UINib nibWithNibName:@"MyCollectionViewCell" bundle:[NSBundle mainBundle]] forCellWithReuseIdentifier:CELLID];
    }
    return _collectionView;
}


#pragma mark delegate
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return _dataSource.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    MyCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CELLID forIndexPath:indexPath];
    cell.imageName = _dataSource[indexPath.row];
    return cell;
}
@end