用CHTCollectionViewWaterfallLayout写瀑布流

实现的瀑布流效果图：

源码：

WaterfallCell.h 与 WaterfallCell.m

////  WaterfallCell.h//  UICollectionView////  Created by YouXianMing on 14-9-17.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import 
     
      @interface WaterfallCell : UICollectionViewCell@property (nonatomic, strong) UIImageView *showImageView;@end
     

////  WaterfallCell.m//  UICollectionView////  Created by YouXianMing on 14-9-17.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "WaterfallCell.h"@implementation WaterfallCell- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        // Scale the imageview to fit inside the contentView with the image centered:        CGRect imageViewFrame = CGRectMake(0.f, 0.f,                                           CGRectGetMaxX(self.contentView.bounds),                                           CGRectGetMaxY(self.contentView.bounds));        _showImageView                  = [UIImageView new];        _showImageView.contentMode      = UIViewContentModeScaleAspectFill;        _showImageView.frame            = imageViewFrame;        _showImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;        _showImageView.clipsToBounds    = YES;        [self addSubview:_showImageView];        self.layer.borderWidth = 1.f;    }    return self;}@end

HeaderView.h 与 HeaderView.m

////  HeaderView.h//  UICollectionView////  Created by YouXianMing on 14-9-17.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import 
     
      @interface HeaderView : UICollectionReusableView@end
     

////  HeaderView.m//  UICollectionView////  Created by YouXianMing on 14-9-17.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "HeaderView.h"@implementation HeaderView- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        self.layer.borderWidth = 1.f;    }    return self;}@end

FooterView.h 与 FooterView.m

////  FooterView.h//  UICollectionView////  Created by YouXianMing on 14-9-17.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import 
     
      @interface FooterView : UICollectionReusableView@end
     

////  FooterView.m//  UICollectionView////  Created by YouXianMing on 14-9-17.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "FooterView.h"@implementation FooterView- (id)initWithFrame:(CGRect)frame{    self = [super initWithFrame:frame];    if (self) {        self.layer.borderWidth = 1.f;    }    return self;}@end

使用时候的代码：

////  RootViewController.m//  UICollectionView////  Created by YouXianMing on 14-9-17.//  Copyright (c) 2014年 YouXianMing. All rights reserved.//#import "RootViewController.h"#import "CHTCollectionViewWaterfallLayout.h"#import "WaterfallCell.h"#import "HeaderView.h"#import "FooterView.h"#define CELL_IDENTIFIER   @"WaterfallCell"#define HEADER_IDENTIFIER @"WaterfallHeader"#define FOOTER_IDENTIFIER @"WaterfallFooter"@interface RootViewController ()
     
      @property (nonatomic, strong) UICollectionView *collectionView;@property (nonatomic, strong) NSMutableArray   *dataSource;@property (nonatomic, strong) NSMutableArray   *dataSourceSize;@end@implementation RootViewController- (void)viewDidLoad{    [super viewDidLoad];        // 数据源    _dataSource = [NSMutableArray new];    for (int i = 0; i <= 16; i++)    {        [_dataSource addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d", i]]];    }    // 初始化布局    CHTCollectionViewWaterfallLayout *layout = [[CHTCollectionViewWaterfallLayout alloc] init];        // 设置布局    layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);    layout.headerHeight = 100;           // headerView高度    layout.footerHeight = 100;           // footerView高度    layout.columnCount  = 4;             // 几列显示    layout.minimumColumnSpacing    = 5;  // cell之间的水平间距    layout.minimumInteritemSpacing = 5;  // cell之间的垂直间距        // 初始化collectionView    _collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds                                         collectionViewLayout:layout];    _collectionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;    _collectionView.dataSource       = self;    _collectionView.delegate         = self;    _collectionView.backgroundColor  = [UIColor whiteColor];        // 注册cell以及HeaderView，FooterView    [_collectionView registerClass:[WaterfallCell class]        forCellWithReuseIdentifier:CELL_IDENTIFIER];    [_collectionView registerClass:[HeaderView class]        forSupplementaryViewOfKind:CHTCollectionElementKindSectionHeader               withReuseIdentifier:HEADER_IDENTIFIER];    [_collectionView registerClass:[FooterView class]        forSupplementaryViewOfKind:CHTCollectionElementKindSectionFooter               withReuseIdentifier:FOOTER_IDENTIFIER];        // 添加到视图当中    [self.view addSubview:_collectionView];}#pragma mark - UICollectionViewDelegate- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{    NSLog(@"您点击了 %@", _dataSource[indexPath.row]);}#pragma mark - UICollectionViewDataSource- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    // 数据源    return [_dataSource count];}- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    // 1个区    return 1;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView                  cellForItemAtIndexPath:(NSIndexPath *)indexPath{    // 注册collectionViewCell    WaterfallCell *cell = \        (WaterfallCell *)[collectionView dequeueReusableCellWithReuseIdentifier:CELL_IDENTIFIER                                                                   forIndexPath:indexPath];        UIImage *image           = _dataSource[indexPath.row];    cell.showImageView.image = image;        return cell;}- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView           viewForSupplementaryElementOfKind:(NSString *)kind                                 atIndexPath:(NSIndexPath *)indexPath{    UICollectionReusableView *reusableView = nil;        if ([kind isEqualToString:CHTCollectionElementKindSectionHeader])    {        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind                                                          withReuseIdentifier:HEADER_IDENTIFIER                                                                 forIndexPath:indexPath];    } else if ([kind isEqualToString:CHTCollectionElementKindSectionFooter])    {        reusableView = [collectionView dequeueReusableSupplementaryViewOfKind:kind                                                          withReuseIdentifier:FOOTER_IDENTIFIER                                                                 forIndexPath:indexPath];    }        return reusableView;}#pragma mark - CHTCollectionViewDelegateWaterfallLayout- (CGSize)collectionView:(UICollectionView *)collectionView                  layout:(UICollectionViewLayout *)collectionViewLayout  sizeForItemAtIndexPath:(NSIndexPath *)indexPath{    // 用以返回尺寸    UIImage *image = _dataSource[indexPath.row];    return image.size;}@end
     

这个代码再怎么简单也会很复杂-_-!!

以下是使用的细节需要注意的地方：

设置的对应关系-

cell中的图片可不是随便设置的-

要注意返回每个cell的size值-