UICollectionView自定义布局——瀑布流

效果图：

代码：

#import "ViewController.h"#import "XMGGridLayout.h"#import "XMGPhotoCell.h"@interface ViewController () <UICollectionViewDataSource, UICollectionViewDelegate>@end@implementation ViewControllerstatic NSString * const XMGPhotoId = @"photo";- (void)viewDidLoad {    [super viewDidLoad];        // 创建布局    XMGGridLayout *layout = [[XMGGridLayout alloc] init];        // 创建CollectionView    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];    collectionView.dataSource = self;    collectionView.delegate = self;    [self.view addSubview:collectionView];        // 注册    [collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([XMGPhotoCell class]) bundle:nil] forCellWithReuseIdentifier:XMGPhotoId];        // 继承UICollectionViewLayout    // 继承UICollectionViewFlowLayout}#pragma mark - <UICollectionViewDataSource>- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 20;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    XMGPhotoCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:XMGPhotoId forIndexPath:indexPath];        cell.imageName = [NSString stringWithFormat:@"%zd", indexPath.item + 1];    //    cell.backgroundColor = [UIColor orangeColor];//    //    NSInteger tag = 10;//    UILabel *label = (UILabel *)[cell.contentView viewWithTag:tag];//    if (label == nil) {//        label = [[UILabel alloc] init];//        label.tag = tag;//        [cell.contentView addSubview:label];//    }//    //    label.text = [NSString stringWithFormat:@"%zd", indexPath.item];//    [label sizeToFit];        return cell;}#pragma mark - <UICollectionViewDelegate>- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{    NSLog(@"------%zd", indexPath.item);}@end

#import "XMGGridLayout.h"@interface XMGGridLayout()/** 所有的布局属性 */@property (nonatomic, strong) NSMutableArray *attrsArray;@end@implementation XMGGridLayout- (NSMutableArray *)attrsArray{    if (!_attrsArray) {        _attrsArray = [NSMutableArray array];    }    return _attrsArray;}- (void)prepareLayout{    [super prepareLayout];        [self.attrsArray removeAllObjects];        NSInteger count = [self.collectionView numberOfItemsInSection:0];    for (int i = 0; i < count; i++) {        // 创建UICollectionViewLayoutAttributes        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];        UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];                // 设置布局属性        CGFloat width = self.collectionView.frame.size.width * 0.5;        if (i == 0) {            CGFloat height = width;            CGFloat x = 0;            CGFloat y = 0;            attrs.frame = CGRectMake(x, y, width, height);        } else if (i == 1) {            CGFloat height = width * 0.5;            CGFloat x = width;            CGFloat y = 0;            attrs.frame = CGRectMake(x, y, width, height);        } else if (i == 2) {            CGFloat height = width * 0.5;            CGFloat x = width;            CGFloat y = height;            attrs.frame = CGRectMake(x, y, width, height);        } else if (i == 3) {            CGFloat height = width * 0.5;            CGFloat x = 0;            CGFloat y = width;            attrs.frame = CGRectMake(x, y, width, height);        } else if (i == 4) {            CGFloat height = width * 0.5;            CGFloat x = 0;            CGFloat y = width + height;            attrs.frame = CGRectMake(x, y, width, height);        } else if (i == 5) {            CGFloat height = width;            CGFloat x = width;            CGFloat y = width;            attrs.frame = CGRectMake(x, y, width, height);        } else {            UICollectionViewLayoutAttributes *lastAttrs = self.attrsArray[i - 6];            CGRect lastFrame = lastAttrs.frame;            lastFrame.origin.y += 2 * width;            attrs.frame = lastFrame;        }                // 添加UICollectionViewLayoutAttributes        [self.attrsArray addObject:attrs];    }}- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{    return self.attrsArray;}/** * 返回collectionView的内容大小 */- (CGSize)collectionViewContentSize{    int count = (int)[self.collectionView numberOfItemsInSection:0];    int rows = (count + 3 - 1) / 3;    CGFloat rowH = self.collectionView.frame.size.width * 0.5;    return CGSizeMake(0, rows * rowH);}@end

#import "XMGPhotoCell.h"@interface XMGPhotoCell()@property (weak, nonatomic) IBOutlet UIImageView *imageView;@end@implementation XMGPhotoCell- (void)awakeFromNib {    self.imageView.layer.borderColor = [UIColor whiteColor].CGColor;    self.imageView.layer.borderWidth = 10;}- (void)setImageName:(NSString *)imageName{    _imageName = [imageName copy];        self.imageView.image = [UIImage imageNamed:imageName];}@end