iOS

只是说明实现瀑布流的方法， 以及自定义layout布局，其他多余事情本文不提。

先看项目框架：

1.ZJJCustomModel 类的内容

#import <Foundation/Foundation.h>

@interface ZJJCustomModel : NSObject

+ (NSArray *)customGetTheImagesArray;

@end

#import "ZJJCustomModel.h"

@implementation ZJJCustomModel

+ (NSArray *)customGetTheImagesArray {

    

//    0-30.jpg

    

    NSMutableArray *arr = [NSMutableArrayarrayWithCapacity:0];

    

    for (NSInteger i =0; i<31; i++) {

        

        NSString *name = [NSStringstringWithFormat:@"%ld.jpg",i];

        

        [arr addObject:name];

        

    }

    

    return arr;

    

}

@end

2.自定义cell（ZJJCustomCollectionCell）类

#import <UIKit/UIKit.h>

@interface ZJJCustomCollectionCell :UICollectionViewCell

- (id)initWithFrame:(CGRect)frame;

// 自定义 cell的 label和 image

@property (nonatomic,strong)UILabel *label;

@property (nonatomic,strong)UIImageView *imageView;

// 图片名字和文本名字

@property (nonatomic,copy)   NSString *imageName;

@property (nonatomic,copy)   NSString *labelName;

@end

#import "ZJJCustomCollectionCell.h"

@implementation ZJJCustomCollectionCell

- (id)initWithFrame:(CGRect)frame {

    

    self = [superinitWithFrame:frame];

    

    if (self) {

        

        self.backgroundColor = [UIColorcolorWithRed:arc4random()%256/255.0green:arc4random()%256/255.0blue:arc4random()%256/255.0alpha:1];

        

        self.imageView = [[UIImageViewalloc] init];

        self.label = [[UILabelalloc] init];

        

        [selfaddSubview:self.imageView];

        [selfaddSubview:self.label];

    }

    returnself;

}

- (void)setImageName:(NSString *)imageName {

    self.imageView.frame =CGRectMake(0,0, self.frame.size.width,self.frame.size.height);

    self.imageView.contentMode =UIViewContentModeScaleAspectFit;

    self.imageView.image = [UIImageimageNamed:imageName];

}

- (void)setLabelName:(NSString *)labelName {

    self.label.frame =CGRectMake(0,self.frame.size.height-30,self.frame.size.width,30);

    self.label.backgroundColor = [UIColorgreenColor];

    self.label.textColor = [UIColorredColor];

    self.label.text = labelName;

    self.label.textAlignment =NSTextAlignmentCenter;

}

@end

3.ViewController 类

// 重用cell标识符

#define   REUSE_CELL   @"cell"

#import "ViewController.h"

#import "ZJJCustomLayout.h"

#import "ZJJCustomModel.h"

#import "ZJJCustomCollectionCell.h"

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegateFlowLayout> {

    UICollectionView *_collect;

    NSArray *_dataArray; // 数据源

}

@end

@implementation ViewController

- (void)viewDidLoad {

    [superviewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    

    self.view.backgroundColor = [UIColorwhiteColor];

    

    [selfarrayInfo];

    

}

#pragma mark - 基础配置

- (void)creatView {

    

    ZJJCustomLayout *layout = [[ZJJCustomLayoutalloc] init];

    layout.itemCount =_dataArray.count;

    layout.scrollDirection =UICollectionViewScrollDirectionVertical;

    

    _collect = [[UICollectionViewalloc] initWithFrame:self.view.framecollectionViewLayout:layout];

    _collect.backgroundColor = [UIColorwhiteColor];

    _collect.delegate =self;

    _collect.dataSource =self;

    [_collectregisterClass:[ZJJCustomCollectionCellclass] forCellWithReuseIdentifier:REUSE_CELL];

    [self.viewaddSubview:_collect];

    

}

#pragma mark - 获取数据，填充数据源

- (void)arrayInfo {

    

    _dataArray = [ZJJCustomModelcustomGetTheImagesArray];

    

    [selfcreatView];

}

#pragma mark - collectionView 代理方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {

    return_dataArray.count;

}

- (__kindofUICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    

    ZJJCustomCollectionCell *cell = [collectionViewdequeueReusableCellWithReuseIdentifier:REUSE_CELLforIndexPath:indexPath];

    

    cell.imageName =_dataArray[indexPath.row];

    cell.labelName = [NSStringstringWithFormat:@"总价:%ld元",indexPath.row+1];

    

    return cell;

}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {

    return1;

}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {

    

    NSLog(@"点击了第%ld个item",indexPath.row);

    

    

}

- (void)didReceiveMemoryWarning {

    [superdidReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}

@end

4.ZJJCustomLayout 类

#import <UIKit/UIKit.h>

@interface ZJJCustomLayout :UICollectionViewFlowLayout

@property (nonatomic,assign)   NSInteger itemCount;//元素个数

@end

#define   SCREEN_W    [UIScreen mainScreen].bounds.size.width

#define   SCREEN_H    [UIScreen mainScreen].bounds.size.height

#import "ZJJCustomLayout.h"

@interface ZJJCustomLayout () {

    

    float _itemW;  // 元素宽度

    

    float _itemH;   // 元素高度

    

    float _heightArray[3]; // 记录每列高度的数组,这里的瀑布流规定有三列

    

    NSMutableArray *_attributesMArray;  // 装有item属性的数组

}

@end

@implementation ZJJCustomLayout

- (void)prepareLayout {

    

    [superprepareLayout];

    

    // 这里假设有三列，给每列赋初始值(状态栏高度)

    _heightArray[0] =20.0f;

    _heightArray[1] =20.0f;

    _heightArray[2] =20.0f;

    _attributesMArray = [NSMutableArrayarray];

    [_attributesMArrayremoveAllObjects];

    

    // 内外间隔是 10，可以设置每个元素的固定宽度

    _itemW = (SCREEN_W-10*(1+3))/3;

    

    for (NSInteger i =0; i<_itemCount; i++) {

        // 随机给高度

        _itemH =arc4random()%50 +_itemW + 30;

        

        // 每个元素的横纵坐标

        float itemX =0.0f;

        float itemY =0.0f;

        

        /**

         记录当前元素应该放在哪一列

         columnRecord = 0  ，  1 ，  2   

         分别表示应该放在第  1 ，   2  ，3 列

        */

        int columnRecord =0;

        if (i ==0) {

            columnRecord = 0;

        }elseif (i == 1) {

            columnRecord = 1;

        }elseif (i == 2) {

            columnRecord = 2;

        }else {

            // 找到最矮的

            if (_heightArray[0] >_heightArray[1]) {

                

                if (_heightArray[1] >_heightArray[2]) {

                    columnRecord = 2;

                }else {

                    columnRecord = 1;

                }

            }else {

                if (_heightArray[0] >_heightArray[2]) {

                    columnRecord = 2;

                }else {

                    columnRecord = 0;

                }

            }

        }

        

        if (columnRecord ==0) {

            itemX = 10;

            itemY = _heightArray[0];

            // 上下间隔 5，不要那么紧凑 

            _heightArray[0] +=_itemH + 5;

        }elseif (columnRecord == 1) {

            itemX = 10 +_itemW+10;

            itemY = _heightArray[1];

            _heightArray[1] +=_itemH + 5;

        }else {

            itemX = (10+_itemW)*2+10;

            itemY = _heightArray[2];

            _heightArray[2] +=_itemH + 5;

        }

        

        NSIndexPath *indexPath = [NSIndexPathindexPathForItem:i inSection:0];

        

         UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributeslayoutAttributesForCellWithIndexPath:indexPath];

        

        attributes.frame =CGRectMake(itemX, itemY,_itemW, _itemH);

        

        [_attributesMArrayaddObject:attributes];

        

    }

    

}

- (nullableNSArray<__kindofUICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {

    

    return_attributesMArray;

    

}

- (CGSize)collectionViewContentSize {

    

    float totalHeight =0.0f;

    

    if (_heightArray[0] >_heightArray[1]) {

        

        totalHeight = MAX(_heightArray[0],_heightArray[2]);

        

    }else {

        

        totalHeight = MAX(_heightArray[1],_heightArray[2]);

        

    }

    

    returnCGSizeMake(SCREEN_W, totalHeight);

    

}

@end

到此，就实现waterfall了，效果如下