屏幕快照 2018-01-15 上午11.40.53.png
思路:
先说一下这个效果的实现思路,首先需要确定该瀑布流有多少列,然后需要确定每个cell 的高度,用一个数组记录下每一列的已添加上去的cell的高度和.然后添加下一个cell的时候找出所有列中高度最小的列,再添加上去.
自定义布局-YJPCollectionLayout
YJPCollectionLayout.h
制定协议
@class YJPCollectionLayout;
@protocol YJPCollectionLayoutDelegate <NSObject>
@required
/**
决定cell的高度,必须实现方法
@param layout 布局类
@param index 第index个Cell
@param width cell 宽度
@return cell 高度
*/
- (CGFloat)collectionLayout: (YJPCollectionLayout *)layout heightForRowAtIndex:(NSInteger)index itemWidth:(CGFloat)width;
@optional
/**
确定有多少列
@param collectionLayout 布局类
@return 列数（默认3列）
*/
- (NSInteger)cloumnCountInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
决定cell 的列的距离
@param collectionLayout 布局类
@return 列的距离(默认10)
*/
- (CGFloat)columMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
决定cell 的行的距离
@param collectionLayout 布局类
@return 行的距离（默认10）
*/
- (CGFloat)rowMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
/**
决定cell 的边缘距
@param collectionLayout 布局类
@return 边距
*/
- (UIEdgeInsets)edgeInsetInCollectionLayout:(YJPCollectionLayout *)collectionLayout;
@end
声明协议,提供方法
@interface YJPCollectionLayout : UICollectionViewFlowLayout
@property (nonatomic,assign) id <YJPCollectionLayoutDelegate>delegate;
@end
YJPCollectionLayout.m
设置默认值
/** 列数*/
static const CGFloat columCount = 3;
/** 每一列间距*/
static const CGFloat columMargin = 10;
/** 每一列间距*/
static const CGFloat rowMargin = 10;
/** 边缘间距*/
static const UIEdgeInsets defaultEdgeInsets = {10,10,10,10};
- (NSInteger)columCount{
if ([self.delegate respondsToSelector:@selector(cloumnCountInWaterFlowLayout:)]) {
return [self.delegate cloumnCountInWaterFlowLayout:self];
}
else{
return columCount;
}
}
- (CGFloat)columMargin{
if ([self.delegate respondsToSelector:@selector(columMarginInWaterFlowLayout:)]) {
return [self.delegate columMarginInWaterFlowLayout:self];
}
else{
return columMargin;
}
}
- (CGFloat)rowMargin{
if ([self.delegate respondsToSelector:@selector(rowMarginInWaterFlowLayout:)]) {
return [self.delegate rowMarginInWaterFlowLayout:self];
}
else{
return rowMargin;
}
}
- (UIEdgeInsets)defaultEdgeInsets{
if ([self.delegate respondsToSelector:@selector(edgeInsetInWaterFlowLayout:)]) {
return [self.delegate edgeInsetInWaterFlowLayout:self];
}
else{
return defaultEdgeInsets;
}
}
声明集合
@interface YJPCollectionLayout ()
/** 布局属性数组*/
@property (nonatomic,strong) NSMutableArray *attrsArray;
/** 存放所有列的当前高度*/
@property (nonatomic,strong) NSMutableArray *columnHeight;
@end
@implementation YJPCollectionLayout
- (NSMutableArray *)attrsArray
{
if (!_attrsArray) {
_attrsArray = [NSMutableArray array];
}
return _attrsArray;
}
- (NSMutableArray *)columnHeight
{
if (!_columnHeight) {
_columnHeight = [NSMutableArray array];
}
return _columnHeight;
}
重写prepareLayout, layoutAttributesForItemAtIndexPath, layoutAttributesForElementsInRect, collectionViewContentSize 方法
/** 初始化*/
- (void)prepareLayout
{
[super prepareLayout];
//如果刷新布局就会重新调用prepareLayout这个方法,所以要先把高度数组清空
[self.columnHeight removeAllObjects];
for (int i = 0; i < self.columCount; i++) {
[self.columnHeight addObject:@(self.defaultEdgeInsets.top)];
}
NSInteger count = [self.collectionView numberOfItemsInSection:0];
[self.attrsArray removeAllObjects];
for (NSInteger i = 0; i < count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
//获取indexPath 对应cell 的布局属性
UICollectionViewLayoutAttributes *attr = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attrsArray addObject:attr];
}
}
/**
* 返回indexPath 位置cell对应的布局属性
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//使用for循环,找出高度最短的那一列
//最短高度的列
NSInteger destColumn = 0;
CGFloat minColumnHeight = [self.columnHeight[0] doubleValue];
for (NSInteger i = 1; i < self.columCount; i++) {
CGFloat columnHeight =[self.columnHeight[i] doubleValue];
if (minColumnHeight > columnHeight) {
minColumnHeight = columnHeight;
destColumn = I;
}
}
CGFloat w = (self.collectionView.frame.size.width - self.defaultEdgeInsets.left - self.defaultEdgeInsets.right - (self.columCount - 1) * self.columMargin )/self.columCount;
//(使用代理在外部决定cell 的高度,下面会介绍)
CGFloat h = [self.delegate waterFlowLayout:self heightForRowAtIndex:indexPath.item itemWidth:w];
CGFloat x = self.defaultEdgeInsets.left + destColumn*(w + self.columMargin);
CGFloat y = minColumnHeight ;
if (y != self.defaultEdgeInsets.top) {
y += self.rowMargin;
}
attr.frame = CGRectMake(x,y,w,h);
self.columnHeight[destColumn] = @(y+ h);
return attr;
}
/**
* 决定cell 的排布
*/
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
return self.attrsArray;
}
/**
决定collectionView的可滚动范围
*/
- (CGSize)collectionViewContentSize
{
CGFloat maxHeight = [self.columnHeight[0] doubleValue];
for (int i = 1; i < self.columCount; i++) {
CGFloat value = [self.columnHeight[i] doubleValue];
if (maxHeight < value) {
maxHeight = value;
}
}
return CGSizeMake(0, maxHeight+self.defaultEdgeInsets.bottom);
}
走到这一步，你的瀑布流布局以完成
使用
#pragma mark - YJPCollectionLayoutDelegate
- (CGFloat)collectionLayout:(YJPCollectionLayout *)layout heightForRowAtIndex:(NSInteger)index itemWidth:(CGFloat)width
{
return random()%100 + 80;
}
- (CGFloat)columMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 10;
}
- (CGFloat)rowMarginInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 10;
}
- (NSInteger)cloumnCountInCollectionLayout:(YJPCollectionLayout *)collectionLayout
{
return 3;
}
- (void)configCollectionView
{
YJPCollectionLayout *layout = [[YJPCollectionLayout alloc]init];
layout.delegate = self;
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, NavigationHeight, K_Screen.width, K_Screen.height - NavigationHeight) collectionViewLayout:layout];
collectionView.delegate = self;
collectionView.dataSource = self;
collectionView.backgroundColor = [UIColor whiteColor];
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"];
[self.view addSubview:collectionView];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 50;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"UICollectionViewCell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor randomColor];
return cell;
}
@end
