UICollectionView瀑布流的实现，带例子

1、实现UICollectionView最重要的就是计算UICollectionViewFlowLayout，因为UICollectionView的每个cell的位置都是根据这个layout决定的

下面贴上主要代码：

#import "ViewController.h"
#import "PicModel.h"
#import "PicFlowLayout.h"
#import "PicCollectionViewCell.h"


@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate>
{
    NSMutableArray * _dataArray;
    UICollectionView * _collectionView;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;
    
    _dataArray = [[NSMutableArray alloc] init];
    
    for (int i = 1; i <= 28; i++) {
        NSString * picPathStr = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"pic%i", i] ofType:@"jpg"];
        NSData * picData = [NSData dataWithContentsOfFile:picPathStr];
        UIImage * image = [UIImage imageWithData:picData];
        PicModel * model = [[PicModel alloc] init];
        model.image = image;
        model.imageHeight = image.size.height;
        model.imageWidth = image.size.width;
        
        model.width = screenWidth/2;
        model.height = model.imageHeight * (model.width/model.imageWidth);
        
        [_dataArray addObject:model];
    }
    
    
    
    PicFlowLayout * layout = [[PicFlowLayout alloc] init];
    layout.dataArray = _dataArray;
    //collectionView的每个cell根据对应的layout进行布局
    
    _collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    _collectionView.dataSource = self;
    _collectionView.delegate = self;
    [self.view addSubview:_collectionView];
    
    [_collectionView registerClass:[PicCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    _collectionView.backgroundColor = [UIColor whiteColor];
    
    
}

#pragma mark --
#pragma mark UICollectionViewDataSource

//返回每个section的cell个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return _dataArray.count;
}

//返回cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    PicCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    
    PicModel * model = _dataArray[indexPath.row];
    
    [cell setModel:model];
    
    return cell;
}

计算layout的代码：

//
//  PicFlowLayout.m
//  001-uicollectionview
//
//  Created by zhonghj on 16/1/18.
//  Copyright © 2016年 dzkj. All rights reserved.
//

#import "PicFlowLayout.h"

@implementation PicFlowLayout


//指定当前的collectionView的contentSize
- (CGSize)collectionViewContentSize
{
    CGFloat leftHeight = 0.0f;//左边的总高度
    CGFloat rightHeight = 0.0f;//右边的总高度
    
    for (int i = 0; i < _dataArray.count; i++) {
        
        PicModel * model = _dataArray[i];
        
        if (leftHeight <= rightHeight) { //放左侧
            leftHeight += model.height;
        }else{
            rightHeight += model.height;
        }
    }
    return CGSizeMake(0, leftHeight > rightHeight?leftHeight: rightHeight);
}


//返回indexPath所对应的cell的属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes * attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    
    CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;
    PicModel * model = _dataArray[indexPath.row];
    CGFloat leftHeight = 0.0f;//左边的总高度
    CGFloat rightHeight = 0.0f;//右边的总高度
    
    for (int i = 0; i < indexPath.row; i++) {
        
        PicModel * subModel = _dataArray[i];
        
        if (leftHeight <= rightHeight) { //放左侧
            leftHeight += subModel.height;
        }else{
            rightHeight += subModel.height;
        }
    }
    
    if (leftHeight <= rightHeight) { //放左侧
        attr.center = CGPointMake(screenWidth/4, leftHeight + model.height/2);
    }else{
        attr.center = CGPointMake(screenWidth/4 * 3, rightHeight + model.height/2);
    }
    attr.size = CGSizeMake(screenWidth/2, model.height);
    
    return attr;
}


//返回的数组，每一个元素和与之序号对应的cell的属性
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSMutableArray * arr = [[NSMutableArray alloc] init];
    for (int i = 0; i < [self.collectionView numberOfItemsInSection:0]; i++) {
        NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        
        UICollectionViewLayoutAttributes * attr = [self layoutAttributesForItemAtIndexPath:indexPath];
        [arr addObject:attr];
    }
    return arr;
}

@end

程序截图：

初始：

拉到最下面：

附：本程序代码：https://github.com/dzonel/collectionView