用CHTCollectionViewWaterfallLayout写瀑布流

用CHTCollectionViewWaterfallLayout写瀑布流

实现的瀑布流效果图：

源码：

WaterfallCell.h 与 WaterfallCell.m

//

//  WaterfallCell.h

//  UICollectionView

//

//  Created by YouXianMing on 14-9-17.

//  Copyright (c) 2014年 YouXianMing. All rights reserved.

//

#import <UIKit/UIKit.h>

@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(.f, .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 = .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 <UIKit/UIKit.h>

@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 = .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 <UIKit/UIKit.h>

@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 = .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 ()<UICollectionViewDataSource, CHTCollectionViewDelegateWaterfallLayout>

@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 = ; i <= ; i++)

    {

        [_dataSource addObject:[UIImage imageNamed:[NSString stringWithFormat:@"%d", i]]];

    }

    // 初始化布局

    CHTCollectionViewWaterfallLayout *layout = [[CHTCollectionViewWaterfallLayout alloc] init];

    // 设置布局

    layout.sectionInset = UIEdgeInsetsMake(, , , );

    layout.headerHeight = ;           // headerView高度

    layout.footerHeight = ;           // footerView高度

    layout.columnCount  = ;             // 几列显示

    layout.minimumColumnSpacing    = ;  // cell之间的水平间距

    layout.minimumInteritemSpacing = ;  // 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 ;

}

- (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值-