IOS UI-瀑布流（UICollectionView）

ViewController.m

//
//  ViewController.m
//  IOS_0227_瀑布流
//
//  Created by ma c on 16/2/27.
//  Copyright © 2016年 博文科技. All rights reserved.
//

#import "ViewController.h"
#import "WaterFlowLayout.h"
#import "MJExtension.h"
#import "MJRefresh.h"
#import "HMShop.h"
#import "ShopCell.h"

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,WaterFlowLayoutDelegate>

@property (nonatomic, weak) UICollectionView *collectionView;
@property (nonatomic, strong) NSMutableArray *shops;

@end

@implementation ViewController

static NSString *ID = @"shop";


- (void)viewDidLoad {
    [super viewDidLoad];
    
    //初始化数据
    NSArray *shopArray = [HMShop objectArrayWithFilename:@"1.plist"];
    [self.shops addObjectsFromArray:shopArray];
    
    [self createUI];
}

- (NSMutableArray *)shops
{
    if (!_shops) {
        _shops = [NSMutableArray array];
    }
    return _shops;
}

- (void)createUI
{
//    CGRect rect = CGRectMake(7, 100, 400, 200);
    WaterFlowLayout *layout = [[WaterFlowLayout alloc] init];
    UICollectionView *collection = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
    collection.backgroundColor = [UIColor groupTableViewBackgroundColor];
    layout.delegate = self;
    collection.dataSource = self;
    collection.delegate = self;
    [collection registerNib:[UINib nibWithNibName:@"ShopCell" bundle:nil] forCellWithReuseIdentifier:ID];
    [self.view addSubview:collection];
    self.collectionView = collection;
    [self.collectionView addFooterWithTarget:self action:@selector(loadMoreShops)];
}

- (void)loadMoreShops
{
    //初始化数据
    NSArray *shopArray = [HMShop objectArrayWithFilename:@"1.plist"];
    [self.shops addObjectsFromArray:shopArray];
    
    [self.collectionView reloadData];
    
    [self.collectionView footerEndRefreshing];
}

#pragma mark - WaterFlowLayoutDelegate

- (CGFloat)waterFlowLayout:(WaterFlowLayout *)waterFlowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath
{
    HMShop *shop = self.shops[indexPath.item];
    return shop.height / shop.width * width;
}


#pragma mark - UICollectionViewDataSource

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return self.shops.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    ShopCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    
    cell.shop = self.shops[indexPath.item];
    
    return cell;
}




@end

WaterFlowLayout.m

//
//  WaterFlowLayout.h
//  IOS_0227_瀑布流
//
//  Created by ma c on 16/2/27.
//  Copyright © 2016年 博文科技. All rights reserved.
//

#import <UIKit/UIKit.h>
@class WaterFlowLayout;

@protocol WaterFlowLayoutDelegate <NSObject>

- (CGFloat)waterFlowLayout:(WaterFlowLayout *)waterFlowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;

@end

@interface WaterFlowLayout : UICollectionViewLayout

@property (nonatomic, assign) UIEdgeInsets sessionInset;
//列间距
@property (nonatomic, assign) CGFloat columnMargin;
//行间距
@property (nonatomic, assign) CGFloat rowMargin;
//列数
@property (nonatomic, assign) int columnCount;

@property (nonatomic, strong) id<WaterFlowLayoutDelegate> delegate;


@end




//
//  WaterFlowLayout.m
//  IOS_0227_瀑布流
//
//  Created by ma c on 16/2/27.
//  Copyright © 2016年 博文科技. All rights reserved.
//

#import "WaterFlowLayout.h"

@interface WaterFlowLayout ()
//存储每列最大高度Y值
@property (nonatomic, strong) NSMutableDictionary *maxYDict;
@property (nonatomic, strong) NSMutableArray *attrsArray;


@end

@implementation WaterFlowLayout

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.rowMargin = 10;
        self.columnMargin = 10;
        self.sessionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        self.columnCount = 3;
    }
    return self;
}

- (NSMutableDictionary *)maxYDict
{
    if (!_maxYDict) {
        _maxYDict = [[NSMutableDictionary alloc] init];
        for (int i = 0; i < self.columnCount; i++) {
            NSString *column = [NSString stringWithFormat:@"%d",i];
            _maxYDict[column] = @(self.sessionInset.top);
            //NSLog(@"%@",_maxYDict);

        }
    }
    return _maxYDict;
}

- (NSMutableArray *)attrsArray
{
    if (!_attrsArray) {
        _attrsArray = [NSMutableArray array];
    }
    return _attrsArray;
}

//布局前准备
- (void)prepareLayout
{
    [super prepareLayout];
    //NSLog(@"layoutAttributesForElementsInRect");
    
    //清空最大Y值
    for (int i = 0; i < self.columnCount; i++) {
        NSString *column = [NSString stringWithFormat:@"%d",i];
        _maxYDict[column] = @0;
    }
    //计算item属性
    [self.attrsArray removeAllObjects];
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    
    for (int i=0; i<count; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArray addObject:attrs];
    }
}

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

//尺寸
- (CGSize)collectionViewContentSize
{
    //NSLog(@"collectionViewContentSize");
    //假设最长的那一列是第0列
    __block NSString *maxYColumn = @"0";
    //找出最长的那一列
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if ([obj floatValue] > [self.maxYDict[maxYColumn] floatValue]) {
            maxYColumn = key;
        }
    }];
    return CGSizeMake(0, [self.maxYDict[maxYColumn] floatValue] + self.sessionInset.bottom);
}
//rect范围内的布局属性
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
//    //NSLog(@"layoutAttributesForElementsInRect");
//    
//    for (int i = 0; i < self.columnCount; i++) {
//        NSString *column = [NSString stringWithFormat:@"%d",i];
//        _maxYDict[column] = @0;
//    }
//    
//    NSMutableArray *array = [NSMutableArray array];
//    NSInteger count = [self.collectionView numberOfItemsInSection:0];
//    
//    for (int i=0; i<count; i++) {
//        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
//        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
//        [array addObject:attrs];
//        
//    }
//    return array;
    return self.attrsArray;
}
//indexPath位置的item的布局属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    //NSLog(@"layoutAttributesForItemAtIndexPath");
    //假设最短的那一列是第0列
    __block NSString *minYColumn = @"0";
    //找出最短的那一列
    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
        if ([obj floatValue] < [self.maxYDict[minYColumn] floatValue]) {
            minYColumn = key;
        }
    }];
    //NSLog(@"%@",minYColumn);
    
    //计算尺寸
    CGFloat width = (self.collectionView.frame.size.width - self.sessionInset.left - self.sessionInset.right - (self.columnCount - 1) * self.columnMargin) / self.columnCount;
    CGFloat height = [self.delegate waterFlowLayout:self heightForWidth:width atIndexPath:indexPath];
    
    //计算位置
    CGFloat x = self.sessionInset.left + (width + self.columnMargin) * [minYColumn intValue];
    CGFloat y = [self.maxYDict[minYColumn] floatValue] + self.rowMargin;
    
    //更新这一列最大Y值
    self.maxYDict[minYColumn] = @(y + height);
    
    //创建属性
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attrs.frame = CGRectMake(x, y, width, height);
    
    return attrs;
}
@end

ShopCell.m

//
//  ShopCell.h
//  IOS_0227_瀑布流
//
//  Created by ma c on 16/2/27.
//  Copyright © 2016年 博文科技. All rights reserved.
//

#import <UIKit/UIKit.h>
@class HMShop;
@interface ShopCell : UICollectionViewCell

@property (nonatomic, strong)  HMShop *shop;

@end



//
//  ShopCell.m
//  IOS_0227_瀑布流
//
//  Created by ma c on 16/2/27.
//  Copyright © 2016年 博文科技. All rights reserved.
//

#import "ShopCell.h"
#import "HMShop.h"

@interface ShopCell ()

@property (weak, nonatomic) IBOutlet UIImageView *imgView;
@property (weak, nonatomic) IBOutlet UILabel *lblPrice;

@end

@implementation ShopCell

- (void)awakeFromNib {
    // Initialization code
}

- (void)setShop:(HMShop *)shop
{
    _shop = shop;
    
    self.imgView.image = [UIImage imageNamed:shop.icon];
    self.lblPrice.text = shop.price;

}

@end

HMShop.m

//
//  HMShop.h
//  05-黑马瀑布流
//
//  Created by Romeo on 15/11/25.
//  Copyright © 2015年 itheima. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface HMShop : NSObject
// 图片
@property (nonatomic, copy) NSString *icon;
// 价格
@property (nonatomic, copy) NSString *price;
// 图片的真实高度
@property (nonatomic, assign) CGFloat height;
// 图片的真实宽度
@property (nonatomic, assign) CGFloat width;

+ (instancetype)shopWithDict:(NSDictionary *)dict;

@end



//
//  HMShop.m
//  05-黑马瀑布流
//
//  Created by Romeo on 15/11/25.
//  Copyright © 2015年 itheima. All rights reserved.
//

#import "HMShop.h"

@implementation HMShop

+ (instancetype)shopWithDict:(NSDictionary *)dict {
    id obj = [[self alloc] init];
    [obj setValuesForKeysWithDictionary:dict];
    return obj;
}

@end