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 = ;
         self.columnMargin = ;
         self.sessionInset = UIEdgeInsetsMake(, , , );
         self.columnCount = ;
     }
     return self;
 }

 - (NSMutableDictionary *)maxYDict
 {
     if (!_maxYDict) {
         _maxYDict = [[NSMutableDictionary alloc] init];
         for (int i = ; 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 = ; i < self.columnCount; i++) {
         NSString *column = [NSString stringWithFormat:@"%d",i];
         _maxYDict[column] = @;
     }
     //计算item属性
     [self.attrsArray removeAllObjects];
     NSInteger count = [self.collectionView numberOfItemsInSection:];

     for (int i=; i<count; i++) {
         NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:];
         UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
         [self.attrsArray addObject:attrs];
     }
 }

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

 //尺寸
 - (CGSize)collectionViewContentSize
 {
     //NSLog(@"collectionViewContentSize");
     //假设最长的那一列是第0列
     __block NSString *maxYColumn = @"";
     //找出最长的那一列
     [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {
         if ([obj floatValue] > [self.maxYDict[maxYColumn] floatValue]) {
             maxYColumn = key;
         }
     }];
     return CGSizeMake(, [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 = @"";
     //找出最短的那一列
     [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 - ) * 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