自定义瀑布流

不规则的图片排列起来,改数据直接用就可以

ZCGFlowLayout.h

#import <UIKit/UIKit.h>@class ZCGFlowLayout;@protocol ZCGFlowLayoutDelegate <NSObject>-(CGFloat)ZCGFlowLayout:(ZCGFlowLayout *)flowLayout heightForRowAtIndexPath:(NSIndexPath *)indexPath width:(CGFloat)width;@end@interface ZCGFlowLayout : UICollectionViewLayout//需要设置一下有多少列//最好不要超过3列@property(nonatomic,assign)NSInteger columnCounts;//设置距离屏幕四周的边界距离@property(nonatomic,assign)UIEdgeInsets edgeInsets;//行间距@property(nonatomic,assign)NSInteger rowSpace;//列间距@property(nonatomic,assign)NSInteger columnSpace;//定义一个代理人属性@property(nonatomic,assign)id<ZCGFlowLayoutDelegate>delegate;@end

ZCGFlowLayout.m

#import "ZCGFlowLayout.h"@interface ZCGFlowLayout ()//用来记录当前每列的高度@property(nonatomic,retain)NSMutableDictionary *columnDic;//用来装所有的attributes@property(nonatomic,retain)NSMutableArray *attributesArr;@end@implementation ZCGFlowLayout//自定义瀑布流的核心在于找出每列里最短的,然后需要用一个字典来存储当前列的长度,然后通过遍历找到当前最短的那列#pragma mark 第一个方法,先重写初始化方法,完成容器初始化-(instancetype)init{    self=[super init];    if (self) {        //先初始化用来存高的字典        self.columnDic=[NSMutableDictionary dictionary];        self.attributesArr=[NSMutableArray array];    }    return self;}#pragma mark --瀑布流第二个方法//重写系统的prepareLayout方法,这个方法当collectionView布局item的时候,该方法会被执行-(void)prepareLayout{    [super prepareLayout];    //根据设置的边框尺寸,先给每列都设置起始的y,就是边框距离屏幕上方的尺寸    for (NSInteger i = 0; i < self.columnCounts ; i++) {        NSString *key=[NSString stringWithFormat:@"%ld",i];        self.columnDic[key]=@(self.edgeInsets.top);    }    //获取collectionView上有多少个item    NSInteger count = [self.collectionView numberOfItemsInSection:0];    //循环遍历所有item的尺寸    for (NSInteger i = 0; i < count; i++) {        [self setItemFrame:i];    }}#pragma mark 第三个方法,用来设置每一个item的尺寸-(void)setItemFrame:(NSInteger)index{    //1.首先要获取当前最短的一列    //2.然后设置item的尺寸    //定义一个字符串,用来保存最小的列的下标    __block NSString *minCilumn=@"0";    //这个方法就是用来遍历字典里所有的key和value的    [self.columnDic enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {        if([obj floatValue] < [self.columnDic[minCilumn] floatValue]){            minCilumn=key;        }    }];    //遍历完之后,就可以找到当前最短的那一列    //计算item的宽    //宽 = (375 - 左边界 - 右边界 - 列间距 * (列数-1))/列数    CGFloat width= (375 - self.edgeInsets.left - self.edgeInsets.right - (self.columnCounts - 1) * self.columnSpace) / self.columnCounts;    //计算item所摆放的x轴坐标    //x = 左边界 + 当前最短列的下标 * (列间距 + item宽)    CGFloat x = self.edgeInsets.left + (self.columnSpace + width) * [minCilumn floatValue];    //指定当前的item是第几分区,第几个    NSIndexPath *indexPath = [NSIndexPath indexPathForRow:index inSection:0];    //高度    //通过协议方法,把当前第几个item传回去,调用完就能返回一个已经计算好的高    CGFloat height = [self.delegate ZCGFlowLayout:self heightForRowAtIndexPath:indexPath width:width];    //找到当前最短列的列高    CGFloat y = [self.columnDic[minCilumn]floatValue];    //需要更新一下最下列的列高 = 原有列高 + 高 + 行间距    self.columnDic[minCilumn] = @(y + height +self.rowSpace);    //这个类是设置item的frame,透明等属性的,决定了item的属性的信息    UICollectionViewLayoutAttributes *attributes=[UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];    //通过attributes设置item的尺寸    attributes.frame=CGRectMake(x, y, width, height);    [self.attributesArr addObject:attributes];}#pragma mark -- 第四个方法:用来告诉layout,布局的时候item的信息-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{    return self.attributesArr;}#pragma mark -- 第五个方法:重新设置滚动的范围-(CGSize)collectionViewContentSize{    //通过字典找到当前列里最长的列    __block NSString *maxKey = @"0";    [self.columnDic enumerateKeysAndObjectsUsingBlock:^(id  _Nonnull key, id  _Nonnull obj, BOOL * _Nonnull stop) {        if ([obj floatValue] > [self.columnDic[maxKey] floatValue]) {            maxKey=key;        }    }];    //找到最长的列之后,别忘了在最下面,加上底部边界    CGFloat h = [self.columnDic[maxKey] floatValue]+self.edgeInsets.bottom;    return CGSizeMake(0, h);}@end

MyCollectionViewCell.h

#import <UIKit/UIKit.h>@interface MyCollectionViewCell : UICollectionViewCell@property(nonatomic,retain)UIImageView *picImageView;@end

MyCollectionViewCell.m

#import "MyCollectionViewCell.h"@implementation MyCollectionViewCell-(instancetype)initWithFrame:(CGRect)frame{    self=[super initWithFrame:frame];    if (self) {        [self createView];    }    return self;}-(void)createView{    self.picImageView=[[UIImageView alloc] initWithFrame:self.contentView.frame];    [self.contentView addSubview:self.picImageView];}//防止重用之后还是上一次出现的尺寸,所以为了能显示新的尺寸,需要重新布局-(void)layoutSubviews{    [super layoutSubviews];    //重新布局cell上的子视图    self.picImageView.frame=self.contentView.frame;}@end

Picture.h

#import <Foundation/Foundation.h>@interface Picture : NSObject@property(nonatomic,copy)NSString *thumbURL;@property(nonatomic,retain)NSNumber *width;@property(nonatomic,retain)NSNumber *height;@end

Picture.m

#import "Picture.h"@implementation Picture-(void)setValue:(id)value forUndefinedKey:(NSString *)key{}@end

ViewController.m

////  ViewController.m//  UI21_自定义瀑布流////  Created by dllo on 16/1/6.//  Copyright © 2016年 dllo. All rights reserved.//#import "ViewController.h"#import "Picture.h"#import "ZCGFlowLayout.h"#import "UIImageView+WebCache.h"#import "MyCollectionViewCell.h"@interface ViewController ()<ZCGFlowLayoutDelegate,UICollectionViewDataSource,UICollectionViewDelegate>@property(nonatomic,retain)NSMutableArray *picArr;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    [self createData];    [self createView];}-(void)createView{    //创建自定义的layout    ZCGFlowLayout *flowLayout=[[ZCGFlowLayout alloc] init];    //设置四周的边框尺寸    flowLayout.edgeInsets = UIEdgeInsetsMake(10, 10, 10, 10);    //设置列数    flowLayout.columnCounts= 3;    //设置行间距    flowLayout.rowSpace=10;    //设置列间距    flowLayout.columnSpace=10;    //设置代理人    flowLayout.delegate=self;    UICollectionView *collectionView=[[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];    collectionView.delegate=self;    collectionView.dataSource=self;    [self.view addSubview:collectionView];    //cell注册    [collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"reuse"];}//用来计算item高的协议方法-(CGFloat)ZCGFlowLayout:(ZCGFlowLayout *)flowLayout heightForRowAtIndexPath:(NSIndexPath *)indexPath width:(CGFloat)width{    //图片的原始尺寸都保存在model里    //计算item的高 = 原始的height * width / 原始的width    Picture *pic = self.picArr[indexPath.row];    CGFloat height = [pic.height floatValue] * width / [pic.width floatValue];    return height;}-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return self.picArr.count;}-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    MyCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"reuse" forIndexPath:indexPath];    Picture *pic=self.picArr[indexPath.row];    [cell.picImageView sd_setImageWithURL:[NSURL URLWithString:pic.thumbURL]placeholderImage:[UIImage imageNamed:@"c4.jpg"]];    return cell;}-(void)createData{    NSString *filePath=[[NSBundle mainBundle] pathForResource:@"Data(1)" ofType:@"json"];    NSData *data=[NSData dataWithContentsOfFile:filePath];    NSMutableArray *arr=[NSJSONSerialization JSONObjectWithData:data options:0 error:nil];    self.picArr=[NSMutableArray array];    for (NSDictionary *dic in arr) {        Picture *pic=[[Picture alloc] init];        [pic setValuesForKeysWithDictionary:dic];        [self.picArr addObject:pic];    }}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end