#import "ViewController.h"
头文件
#import "WaterFallLayout.h"
#import "MyCollectionViewCell.h"
#import "MyImage.h"
#import "UIImageView+WebCache.h"
//定义属性网格对象、图片数组
@property (nonatomic,strong)UICollectionView *collectionView;
@property (nonatomic,strong)NSMutableArray *array;
- (void)viewDidLoad {
[super viewDidLoad];
//初始化图片数组
self.array = [NSMutableArray array];
//请求数据
NSString *path = [[NSBundle mainBundle]pathForResource:@"0" ofType:@"plist"];
NSArray *arr = [NSArray arrayWithContentsOfFile:path];
for (NSDictionary *dic in arr) {
//初始化图片对象
MyImage *mi = [[MyImage alloc]init];
mi.url = dic[@"img"];
mi.width = dic[@"w"];
mi.height = dic[@"h"];
mi.price = dic[@"price"];
//加入数组
[self.array addObject:mi];
}
//初始化布局流对象
WaterFallLayout *layout = [[WaterFallLayout alloc]init];
//设置列数
layout.columnCount = 3;
//设置列间距
layout.columnSpacing = 10;
//设置行间距
layout.rowSpacing = 10;
//设置边距
layout.sectionInsets = UIEdgeInsetsMake(10, 10, 10, 10);
//block返回单元格高度
layout.getItemHeight = ^float(float itemWidth, NSIndexPath *indexPath) {
//获取单元格对应图片对象
MyImage *mi = self.array[indexPath.item];
//单元格高度 = 图片高度 / 图片宽度 * 单元格宽度
return [mi.height floatValue] / [mi.width floatValue] * itemWidth;
};
//初始化网格对象
self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
//设置代理
self.collectionView.dataSource = self;
self.collectionView.delegate = self;
//背景颜色
self.collectionView.backgroundColor = [UIColor whiteColor];
//注册网格单元格
[self.collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
//加入self视图
[self.view addSubview:self.collectionView];
}
//设置行数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.array.count;
}
//设置单元格内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
//获取图片对象
MyImage *mi = self.array[indexPath.item];
//SDWebImage加载图片
[cell.img sd_setImageWithURL:[NSURL URLWithString:mi.url] placeholderImage:[UIImage imageNamed:@"0.png"]];
cell.img.frame = CGRectMake(0, 0, cell.frame.size.width, cell.frame.size.height);
//设置价格标签
cell.lab.text = mi.price;
cell.lab.frame = CGRectMake(0, cell.frame.size.height - 30, cell.frame.size.width, 30);
return cell;
}
//点击单元格响应方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
//打印单元格下标
NSLog(@"%ld",indexPath.item);
}
创建WaterFallLayout页面继承UICollectionViewLayout
.h
//定义属性列数、列间距、行间距、边距、单元格高度、列高度数组、单元格属性数组
@property (nonatomic,assign)int columnCount;
@property (nonatomic,assign)float columnSpacing,rowSpacing;
@property (nonatomic,assign)UIEdgeInsets sectionInsets;
@property (nonatomic,strong)float (^getItemHeight)(float itemWidth,NSIndexPath *indexPath);
@property (nonatomic,strong)NSMutableArray *columnHeightArray,*attributesArray;
.m
//懒加载
- (NSMutableArray *)columnHeightArray
{
if (!_columnHeightArray)
{
_columnHeightArray = [NSMutableArray array];
}
return _columnHeightArray;
}
- (NSMutableArray *)attributesArray
{
if (!_attributesArray)
{
_attributesArray = [NSMutableArray array];
}
return _attributesArray;
}
//布局前准备
- (void)prepareLayout
{ //更新数组
[self.columnHeightArray removeAllObjects];
//初始化列高数组
for (int i = 0; i < self.columnCount; i ++)
{
//初值 = 上边距
[self.columnHeightArray addObject:@(self.sectionInsets.top)];
}
//更新数组
[self.attributesArray removeAllObjects];
//初始化单元格属性数组
//获取单元格数量
NSInteger count = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i < count; i ++)
{
//获取单元格属性
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
//加入数组
[self.attributesArray addObject:attributes];
}}
//设置滚动范围
- (CGSize)collectionViewContentSize
{
//获取最长的一列高度
__block float maxColumnHeight = 0;
//遍历数组
[self.columnHeightArray enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop)
{
if (maxColumnHeight < [obj floatValue])
{
maxColumnHeight = [obj floatValue];
}
}];
//滚动高度 = 最大列高 + 下边距
return CGSizeMake(0, maxColumnHeight + self.sectionInsets.bottom);}
//设置单元格属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
//获取单元格属性
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//获取网格宽度
float width = self.collectionView.frame.size.width;
//item的宽度 = (collectionView的宽度 - 左边距 - 右边距 - 列距 * (列数 - 1)） / 列数 float itemWidth = (width - self.sectionInsets.left - self.sectionInsets.right - self.columnSpacing * (self.columnCount - 1)) / self.columnCount;
//获取最短的一列高度
__block float minColumnHeight = MAXFLOAT;
//下标
__block NSUInteger minColumnIndex = 0;
//遍历数组
[self.columnHeightArray enumerateObjectsUsingBlock:^(id _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop)
{
if (minColumnHeight > [obj floatValue])
{
minColumnHeight = [obj floatValue];
minColumnIndex = idx;
}
}];
//item的x值 = 左边距 + (item宽度 + 列间距) * 最短列下标
float itemX = self.sectionInsets.left + (itemWidth + self.columnSpacing) * minColumnIndex;
//item的y值 = 最短列的高度 + 行间距
float itemY = minColumnHeight + self.rowSpacing;
//设置单元格高度(通过block传值获取)
float itemHeight = self.getItemHeight(itemWidth,indexPath);
//设置单元格位置
attributes.frame = CGRectMake(itemX, itemY, itemWidth, itemHeight);
//更新列高数组
self.columnHeightArray[minColumnIndex] = @(itemY + itemHeight);
return attributes;
}
//返回所有单元格属性
- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attributesArray;
}
创建MyCollectionViewCell页面继承UICollectionViewCell
.h
//定义属性图片视图、价格标签
@property (nonatomic,strong)UIImageView *img;
@property (nonatomic,strong)UILabel *lab;
.m
//初始化图片视图
- (UIImageView *)img
{
if (!_img) {
_img = [[UIImageView alloc]init];
[self addSubview:_img];
}
return _img;
}
//初始化价格标签
- (UILabel *)lab
{
if (!_lab) {
_lab = [[UILabel alloc]init];
_lab.textAlignment = NSTextAlignmentCenter;
_lab.backgroundColor = [UIColor lightGrayColor];
_lab.alpha = 0.6;
[self addSubview:_lab];
}
return _lab;
}
创建MyImage页面继承NSObject
.h
//定义属性图片地址、图片宽、图片高、价格
@property (nonatomic,strong)NSString *url,*width,*height,*price;