#import "ViewController.h"
頭文件
#import "WaterFallLayout.h"
#import "MyCollectionViewCell.h"
#import "MyImage.h"
#import "UIImageView+WebCache.h"
<UICollectionViewDataSource,UICollectionViewDelegate>
//定義屬性網(wǎng)格對(duì)象、圖片數(shù)組
@property (nonatomic,strong)UICollectionView *collectionView;
@property (nonatomic,strong)NSMutableArray *array;
- (void)viewDidLoad {
[super viewDidLoad];
//初始化圖片數(shù)組
self.array = [NSMutableArray array];
//請(qǐng)求數(shù)據(jù)
NSString *path = [[NSBundle mainBundle]pathForResource:@"0" ofType:@"plist"];
NSArray *arr = [NSArray arrayWithContentsOfFile:path];
for (NSDictionary *dic in arr) {
//初始化圖片對(duì)象
MyImage *mi = [[MyImage alloc]init];
mi.url = dic[@"img"];
mi.width = dic[@"w"];
mi.height = dic[@"h"];
mi.price = dic[@"price"];
//加入數(shù)組
[self.array addObject:mi];
}
//初始化布局流對(duì)象
WaterFallLayout *layout = [[WaterFallLayout alloc]init];
//設(shè)置列數(shù)
layout.columnCount = 3;
//設(shè)置列間距
layout.columnSpacing = 10;
//設(shè)置行間距
layout.rowSpacing = 10;
//設(shè)置邊距
layout.sectionInsets = UIEdgeInsetsMake(10, 10, 10, 10);
//block返回單元格高度
layout.getItemHeight = ^float(float itemWidth, NSIndexPath *indexPath) {
//獲取單元格對(duì)應(yīng)圖片對(duì)象
MyImage *mi = self.array[indexPath.item];
//單元格高度 = 圖片高度 / 圖片寬度 * 單元格寬度
return [mi.height floatValue] / [mi.width floatValue] * itemWidth;
};
//初始化網(wǎng)格對(duì)象
self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
//設(shè)置代理
self.collectionView.dataSource = self;
self.collectionView.delegate = self;
//背景顏色
self.collectionView.backgroundColor = [UIColor whiteColor];
//注冊(cè)網(wǎng)格單元格
[self.collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
//加入self視圖
[self.view addSubview:self.collectionView];
}
//設(shè)置行數(shù)
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.array.count;
}
//設(shè)置單元格內(nèi)容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
//獲取圖片對(duì)象
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);
//設(shè)置價(jià)格標(biāo)簽
cell.lab.text = mi.price;
cell.lab.frame = CGRectMake(0, cell.frame.size.height - 30, cell.frame.size.width, 30);
return cell;
}
//點(diǎn)擊單元格響應(yīng)方法
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
//打印單元格下標(biāo)
NSLog(@"%ld",indexPath.item);
}
創(chuàng)建WaterFallLayout頁面繼承UICollectionViewLayout
.h
//定義屬性列數(shù)、列間距、行間距、邊距、單元格高度、列高度數(shù)組、單元格屬性數(shù)組
@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;
}
//布局前準(zhǔn)備
- (void)prepareLayout
{? ? //更新數(shù)組??
? [self.columnHeightArray removeAllObjects];? ?
?//初始化列高數(shù)組? ??
for (int i = 0; i < self.columnCount; i ++)?
{? ? ? ??
//初值 = 上邊距? ? ??
? [self.columnHeightArray addObject:@(self.sectionInsets.top)];??
? }? ?
?//更新數(shù)組??
? [self.attributesArray removeAllObjects];? ??
//初始化單元格屬性數(shù)組??
? //獲取單元格數(shù)量??
? NSInteger count = [self.collectionView numberOfItemsInSection:0];? ?
?for (int i = 0; i < count; i ++)?
{? ? ? ??
//獲取單元格屬性? ? ?
?? UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];? ? ??
? //加入數(shù)組? ? ? ?
?[self.attributesArray addObject:attributes];? ?
?}}
//設(shè)置滾動(dòng)范圍
- (CGSize)collectionViewContentSize
{? ?
?//獲取最長的一列高度?
?? __block float maxColumnHeight = 0;? ?
?//遍歷數(shù)組? ?
?[self.columnHeightArray enumerateObjectsUsingBlock:^(id? _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop)
?{? ? ?
?? if (maxColumnHeight < [obj floatValue])
?{? ? ? ??
? ? maxColumnHeight = [obj floatValue];? ??
? ? }? ?
?}];??
? //滾動(dòng)高度 = 最大列高 + 下邊距??
? return CGSizeMake(0, maxColumnHeight + self.sectionInsets.bottom);}
//設(shè)置單元格屬性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{??
? //獲取單元格屬性? ??
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];??
? //獲取網(wǎng)格寬度? ?
?float width = self.collectionView.frame.size.width;??
? //item的寬度 = (collectionView的寬度 - 左邊距 - 右邊距 - 列距 * (列數(shù) - 1)） / 列數(shù)? ? float itemWidth = (width - self.sectionInsets.left - self.sectionInsets.right - self.columnSpacing * (self.columnCount - 1)) / self.columnCount;??
? //獲取最短的一列高度?
?? __block float minColumnHeight = MAXFLOAT;? ?
?//下標(biāo)?
?? __block NSUInteger minColumnIndex = 0;??
? //遍歷數(shù)組? ?
?[self.columnHeightArray enumerateObjectsUsingBlock:^(id? _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop)
?{? ? ?
?? if (minColumnHeight > [obj floatValue])
?{? ? ? ? ?
?? minColumnHeight = [obj floatValue];? ? ?
?? ? ? minColumnIndex = idx;? ? ?
?? }??
? }];? ?
?//item的x值 = 左邊距 + (item寬度 + 列間距) * 最短列下標(biāo)?
?? float itemX = self.sectionInsets.left + (itemWidth + self.columnSpacing) * minColumnIndex;? ?
?//item的y值 = 最短列的高度 + 行間距? ?
?float itemY = minColumnHeight + self.rowSpacing;?
?? //設(shè)置單元格高度(通過block傳值獲取)??
? float itemHeight = self.getItemHeight(itemWidth,indexPath);??
? //設(shè)置單元格位置? ?
?attributes.frame = CGRectMake(itemX, itemY, itemWidth, itemHeight);?
?? //更新列高數(shù)組? ??
self.columnHeightArray[minColumnIndex] = @(itemY + itemHeight);?
?? return attributes;
}
//返回所有單元格屬性
- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attributesArray;
}
創(chuàng)建MyCollectionViewCell頁面繼承UICollectionViewCell
.h
//定義屬性圖片視圖、價(jià)格標(biāo)簽
@property (nonatomic,strong)UIImageView *img;
@property (nonatomic,strong)UILabel *lab;
.m
//初始化圖片視圖
- (UIImageView *)img
{
if (!_img) {
_img = [[UIImageView alloc]init];
[self addSubview:_img];
}
return _img;
}
//初始化價(jià)格標(biāo)簽
- (UILabel *)lab
{
if (!_lab) {
_lab = [[UILabel alloc]init];
_lab.textAlignment = NSTextAlignmentCenter;
_lab.backgroundColor = [UIColor lightGrayColor];
_lab.alpha = 0.6;
[self addSubview:_lab];
}
return _lab;
}
創(chuàng)建MyImage頁面繼承NSObject
.h
//定義屬性圖片地址、圖片寬、圖片高、價(jià)格
@property (nonatomic,strong)NSString *url,*width,*height,*price;
