效果圖如下

效果圖.gif

具體代碼

• 繼承自UICollectionViewLayout
• LTWaterflowLayout.h文件

#import <UIKit/UIKit.h>
@class LTWaterflowLayout;

@protocol LTWaterflowLayoutDelegate <NSObject>
@required
// 指定位置item的高度
- (CGFloat)waterflowLayout:(LTWaterflowLayout *)waterflowLayout heightForItemAtIndexPath:(NSIndexPath *)indexPath width:(CGFloat)width;
@optional
// 內(nèi)邊距
- (UIEdgeInsets)insetInWaterflowLayout:(LTWaterflowLayout *)waterflowLayout;
// 行間距
- (CGFloat)lineSpacingInWaterflowLayout:(LTWaterflowLayout *)waterflowLayout;
// 縱間距
- (CGFloat)interitemSpacingInWaterflowLayout:(LTWaterflowLayout *)waterflowLayout;
// 列數(shù)
- (NSInteger)columnCountInWaterflowLayout:(LTWaterflowLayout *)waterflowLayout;
@end

@interface LTWaterflowLayout : UICollectionViewLayout
// 代理
@property (nonatomic, weak) id<LTWaterflowLayoutDelegate> delegate;
@end

• LTWaterflowLayout.m文件

#import "LTWaterflowLayout.h"

@interface LTWaterflowLayout ()

// 列數(shù)
@property (nonatomic, assign) NSInteger columnCount;
// 內(nèi)邊距
@property (nonatomic) UIEdgeInsets sectionInset;
// 行間距
@property (nonatomic) CGFloat lineSpacing;
// 縱間距
@property (nonatomic) CGFloat interitemSpacing;
// 屬性數(shù)組
@property (nonatomic, strong) NSMutableArray *attrsArray;
// 存放每一列高度的數(shù)組
@property (nonatomic, strong) NSMutableArray <NSNumber *> *minHeights;
// 內(nèi)容最大高度
@property (nonatomic, assign) CGFloat contentHeight;

@end

@implementation LTWaterflowLayout

#pragma mark - <代理返回的基本數(shù)據(jù)>

// 列數(shù)
- (NSInteger)columnCount
{
    if ([self.delegate respondsToSelector:@selector(columnCountInWaterflowLayout:)]) {
        return [self.delegate columnCountInWaterflowLayout:self];
    }
    return _columnCount;
}

// 內(nèi)邊距
- (UIEdgeInsets)sectionInset
{
    if ([self.delegate respondsToSelector:@selector(insetInWaterflowLayout:)]) {
        return [self.delegate insetInWaterflowLayout:self];
    }
    return _sectionInset;
}

// 行間距
- (CGFloat)lineSpacing
{
    if ([self.delegate respondsToSelector:@selector(lineSpacingInWaterflowLayout:)]) {
        return [self.delegate lineSpacingInWaterflowLayout:self];
    }
    return _lineSpacing;
}

// 列間距
- (CGFloat)interitemSpacing
{
    if ([self.delegate respondsToSelector:@selector(interitemSpacingInWaterflowLayout:)]) {
        return [self.delegate interitemSpacingInWaterflowLayout:self];
    }
    return _interitemSpacing;
}

#pragma mark - <基礎(chǔ)設(shè)置>

// 初始化方法中設(shè)置基礎(chǔ)數(shù)據(jù)
- (instancetype)init
{
    self = [super init];
    if (self) {
        self.columnCount = 2;
        self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
        self.lineSpacing = 10;
        self.interitemSpacing = 10;
    }
    return self;
}

// 記錄屬性的數(shù)組
- (NSMutableArray *)attrsArray
{
    if (!_attrsArray) {
        self.attrsArray = [[NSMutableArray alloc] init];
    }
    return _attrsArray;
}

// 記錄每列高度的數(shù)組
- (NSMutableArray <NSNumber *> *)minHeights
{
    if (!_minHeights) {
        self.minHeights = [[NSMutableArray alloc] init];
        for (int i = 0; i < self.columnCount; i++) {
            self.minHeights[i] = @(self.sectionInset.top);
        }
    }
    return _minHeights;
}

// 初始化
- (void)prepareLayout
{
    [super prepareLayout];
    //每次刷新都會走這里, 清空數(shù)據(jù)
    self.contentHeight = 0;
    self.minHeights = nil;
    [self.attrsArray removeAllObjects];
    
    NSInteger rows = [self.collectionView numberOfItemsInSection:0];
    for (int i = 0; i < rows; i++) {
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArray addObject:attrs];
    }
}

// 決定cell的排布
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    return self.attrsArray;
}

// 返回indexPath位置cell對應(yīng)的布局屬性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    // 計(jì)算每一個(gè)cell對應(yīng)的寬度
    CGFloat width = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnCount - 1) * self.interitemSpacing) / self.columnCount;
    // 獲取每一個(gè)cell對應(yīng)的高度
    CGFloat height = [self.delegate waterflowLayout:self heightForItemAtIndexPath:indexPath width:width];
    // 默認(rèn)第一列的高度最小
    CGFloat minH = self.minHeights[0].doubleValue;
    NSInteger minIndex = 0;
    // 找到最小高度, 以及對應(yīng)的列數(shù)
    for (int i = 1; i < self.minHeights.count; i++) {
        if (minH > self.minHeights[i].doubleValue) {
            minH = self.minHeights[i].doubleValue;
            minIndex = i;
        }
    }
    // 計(jì)算出cell對應(yīng)的frame
    CGFloat x = self.sectionInset.left + (self.interitemSpacing + width) * minIndex;
    CGFloat y = 0;
    if (indexPath.row < self.columnCount) {
        y = minH;
    }else {
        y = minH + self.lineSpacing;
    }
    attrs.frame = CGRectMake(x, y, width, height);
    // 記錄該列更新后的高度
    self.minHeights[minIndex] = @(CGRectGetMaxY(attrs.frame));
    // 記錄當(dāng)前最高列的高度
    if (CGRectGetMaxY(attrs.frame) > self.contentHeight) {
        self.contentHeight = CGRectGetMaxY(attrs.frame);
    }
    return attrs;
}

// collectionView的內(nèi)容大小
- (CGSize)collectionViewContentSize
{
    return CGSizeMake(0, self.contentHeight + self.sectionInset.bottom);
}

@end