瀑布流

思路: 先说一下这个效果的实现思路,首先需要确定该瀑布流有多少列,然后需要确定每个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

转载于:https://my.oschina.net/iOScoderZhao/blog/1823009