IOS瀑布流通过UICollectionView控件实现

ViewController.m

//首先让我们先设置一个宏定义

#define screenHeight [[UIScreen mainScreen]bounds].size.height //屏幕高度

#define screenWidth [[UIScreen mainScreen]bounds].size.width  //屏幕宽度

#define colletionCell 3  //设置具体几列

导入头文件#import "CollectionViewCell.h"

//接下来我们设置代理以及创建成员变量

<UICollectionViewDelegate,UICollectionViewDataSource>{

UICollectionView *collectionView1;

NSMutableArray  *hArr; //记录每个cell的高度

}

//接下来我们在设置viewDidlod

- (void)viewDidLoad {

[super viewDidLoad];

hArr = [[NSMutableArray alloc] init];

UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc]init];

[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical]; //设置横向还是竖向

collectionView1=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, screenWidth ,screenHeight) collectionViewLayout:flowLayout];

collectionView1.dataSource=self;

collectionView1.delegate=self;

[collectionView1 setBackgroundColor:[UIColor clearColor]];

[collectionView1 registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"];

[self.view addSubview:collectionView1];

}

//接下来实现网格的代理方法注意这里必须要实现的代理方法

#pragma mark -- UICollectionViewDataSource

//定义展示的UICollectionViewCell的个数

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

{

return 10;

}

//定义展示的Section的个数

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

return 1;

}

//每个UICollectionView展示的内容

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

{

static NSString * CellIdentifier = @"UICollectionViewCell";

CollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];

cell.backgroundColor = [UIColor purpleColor];

NSArray *arr = @[[UIImage imageNamed:@"1.jpg"],[UIImage imageNamed:@"2.jpg"],[UIImage imageNamed:@"1.jpg"],[UIImage imageNamed:@"2.jpg"],[UIImage imageNamed:@"1.jpg"],[UIImage imageNamed:@"2.jpg"],[UIImage imageNamed:@"1.jpg"],[UIImage imageNamed:@"2.jpg"],[UIImage imageNamed:@"1.jpg"],[UIImage imageNamed:@"2.jpg"]];

cell.Img.image = arr[indexPath.row];

//移除cell

for (id subView in cell.contentView.subviews) {

[subView removeFromSuperview];}

NSInteger remainder=indexPath.row%colletionCell;

NSInteger currentRow=indexPath.row/colletionCell;

CGFloat  currentHeight=[hArr[indexPath.row] floatValue];

CGFloat positonX=(screenWidth/colletionCell-8)*remainder+5*(remainder+1);

CGFloat positionY=(currentRow+1)*5;

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

NSInteger position=remainder+i*colletionCell;

positionY+=[hArr[position] floatValue];}

cell.frame = CGRectMake(positonX, positionY,screenWidth/colletionCell-8,currentHeight) ;//重新定义cell位置、宽高

return cell;}

#pragma mark --UICollectionViewDelegateFlowLayout

//定义每个Item 的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath

{

CGFloat height=100+(arc4random()%120);

[hArr addObject:[NSString stringWithFormat:@"%f",height]];

return  CGSizeMake(screenWidth/colletionCell-8, height);  //设置cell宽高

}

//定义每个UICollectionView 的 margin

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

return UIEdgeInsetsMake(0,0, 0, 0);

}

#pragma mark --UICollectionViewDelegate

//UICollectionView被选中时调用的方法

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

{

CollectionViewCell * cell = (CollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];

cell.backgroundColor = [UIColor redColor];

}

//返回这个UICollectionView是否可以被选择

-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath

{

return YES;

}