iOS开发 类似淘宝商城列表的瀑布流

瀑布流开发只需要自定义一个UICollectionViewFlowLayout即可，然后获取网络数据的时候，传入网络数据高度即可，设置列数和宽度，自适应瀑布流会

.h文件

//
//  CYWWaterFallLayout.h
//  NoticeXi
//
//  Created by li lei on 2023/2/7.
//  Copyright © 2023 zhaoxiaoer. All rights reserved.
//

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface CYWWaterFallLayout : UICollectionViewFlowLayout


//数据
@property (nonatomic,strong) NSArray *dataList;//传入网络数据动态高度

@property (nonatomic, assign) CGFloat itemWidth;//宽度

@property (nonatomic, assign) NSInteger columnCount;//列数
@end

NS_ASSUME_NONNULL_END

.m文件

//
//  CYWWaterFallLayout.m
//  NoticeXi
//
//  Created by li lei on 2023/2/7.
//  Copyright © 2023 zhaoxiaoer. All rights reserved.
// 瀑布流

#import "CYWWaterFallLayout.h"


@interface CYWWaterFallLayout ()

 
@property (nonatomic, strong) NSMutableArray<UICollectionViewLayoutAttributes *> *layoutAttributes;

@property (nonatomic, strong) NSArray<NSNumber *> *heightsForColumnArray;

@end
 
@implementation CYWWaterFallLayout

- (void)prepareLayout

{

    [super prepareLayout];

    [_layoutAttributes removeAllObjects];

    NSInteger column = self.columnCount;

    NSInteger section = 0;

    NSInteger numberOfItem = [self.collectionView numberOfItemsInSection:section];

    NSMutableArray<NSNumber *> *allColumnMaxY = [NSMutableArray array];

    for (int currentColumn = 0; currentColumn < column; currentColumn++)

    {

        allColumnMaxY[currentColumn] = @(0);

    }

    for (int index = 0; index < numberOfItem; index++)

    {

        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:index inSection:section];

        CGFloat minColumnMaxY = allColumnMaxY[0].floatValue;

        NSInteger itemColumn = 0;

        for (int columnIndex = 0; columnIndex < column; columnIndex++)
        {
            CGFloat columnMaxyValue = allColumnMaxY[columnIndex].floatValue;

            if (minColumnMaxY > columnMaxyValue)
            {
                minColumnMaxY = columnMaxyValue;

                itemColumn = columnIndex;
            }
        }

        // 这里获取item的UICollectionViewLayoutAttributes布局属性，如果是高度根据手动计算出来的，那么在下面直接设置item的高度就好。(网上看到大多都是能确定item高度的瀑布流布局方式)

        UICollectionViewLayoutAttributes *layoutAttributes = [self layoutAttributesForItemAtIndexPath:indexPath];


        CGFloat itemY = minColumnMaxY + self.minimumLineSpacing;

        CGFloat itemX = self.sectionInset.left + (self.minimumInteritemSpacing + self.itemWidth) * itemColumn;
        
        NoticeVoiceListModel *model = self.dataList[index];
        
        CGRect itemRect = CGRectMake(itemX, itemY, self.itemWidth,model.height);

        layoutAttributes.frame = itemRect;

        [self.layoutAttributes addObject:layoutAttributes];

        allColumnMaxY[itemColumn] = @(CGRectGetMaxY(itemRect));

    }

    _heightsForColumnArray = allColumnMaxY;

}

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect

{

    return self.layoutAttributes;

}

- (CGSize)collectionViewContentSize {

    CGSize size = [super collectionViewContentSize];

    if (_heightsForColumnArray.count == 0) {

        return size;

    }

    CGFloat height = _heightsForColumnArray[0].floatValue;

    for (int i = 0; i < _heightsForColumnArray.count; i++)

    {

        if (height < _heightsForColumnArray[i].floatValue)

        {

            height = _heightsForColumnArray[i].floatValue;

        }

    }

    return CGSizeMake(size.width, height + self.sectionInset.bottom);

}

#pragma mark - Getter

- (NSMutableArray<UICollectionViewLayoutAttributes *> *)layoutAttributes

{

    if (!_layoutAttributes)

    {

        _layoutAttributes = [NSMutableArray<UICollectionViewLayoutAttributes *> array];

    }

    return _layoutAttributes;

}

@end

使用方法:

- (UICollectionView *)collectionView {
    
    if (_collectionView == nil) {
        // 创建FlowLayout
        CYWWaterFallLayout *flowLayout = [[CYWWaterFallLayout alloc] init];
        flowLayout.columnCount = 2;
        flowLayout.itemWidth = (DR_SCREEN_WIDTH-25)/2;
        flowLayout.minimumLineSpacing = 10;
        flowLayout.minimumInteritemSpacing = 5;
        flowLayout.sectionInset = UIEdgeInsetsMake(5, 10, 5, 10);
        // 垂直方向滑动
        flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
        self.layout = flowLayout;
        // 创建collectionView
        CGRect frame = CGRectMake(0,0, DR_SCREEN_WIDTH,DR_SCREEN_HEIGHT-TAB_BAR_HEIGHT-NAVIGATION_BAR_HEIGHT-50);
        _collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:self.layout];
        // 设置代理
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.showsVerticalScrollIndicator = NO;          // 隐藏垂直方向滚动条
        // 注册cell
        [_collectionView registerClass:[NoticeCollcetionVoiceCell class] forCellWithReuseIdentifier:@"Cell"];
    }
    
    return _collectionView;
}