IOS瀑布流通过UICollectionView控件实现

 原博文地址：http://blog.csdn.net/lilinoscar/article/details/47979353

有些IOS项目会用的瀑布流功能，我们可以选择使用第三方库，也可以自己写一个，如果自己写此功能，可以使用UICollectionView控件进行展示，设置分为几列等。

具体代码如下：

[objc]  view plain copy

1. #define screenHeight [[UIScreen mainScreen]bounds].size.height //屏幕高度  
2. #define screenWidth [[UIScreen mainScreen]bounds].size.width   //屏幕宽度  
3. #define colletionCell 3  //设置具体几列  
4. @interface HomeViewController (){  
5.     UICollectionView *collectionView;  
6.     NSMutableArray  *hArr; //记录每个cell的高度  
7. }  
8.   
9. @end  
10.   
11. @implementation HomeViewController  
12. - (void)viewDidLoad {  
13.     [super viewDidLoad];  
14.     hArr = [[NSMutableArray alloc] init];  
15.     UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc]init];  
16.     [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical]; //设置横向还是竖向  
17.     collectionView=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, screenWidth ,screenHeight) collectionViewLayout:flowLayout];  
18.     collectionView.dataSource=self;  
19.     collectionView.delegate=self;  
20.     [collectionView setBackgroundColor:[UIColor clearColor]];  
21.     [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"];  
22.     [self.view addSubview:collectionView];  
23. }  
24. #pragma mark -- UICollectionViewDataSource  
25.   
26. //定义展示的UICollectionViewCell的个数  
27. -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section  
28. {  
29.     return 20;   
30. }  
31.   
32. //定义展示的Section的个数  
33. -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView  
34. {  
35.     return 1;  
36. }  
37.   
38. //每个UICollectionView展示的内容  
39. -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath  
40. {  
41.     static NSString * CellIdentifier = @"UICollectionViewCell";  
42.     UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];  
43.       
44.     cell.backgroundColor = [UIColor colorWithRed:((110 * indexPath.row) / 255.0) green:((220 * indexPath.row)/255.0) blue:((330 * indexPath.row)/255.0) alpha:1.0f];  
45.     UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 20, 20)];  
46.     label.textColor = [UIColor redColor];  
47.     label.text = [NSString stringWithFormat:@"%d",indexPath.row];  
48.     //移除cell  
49.     for (id subView in cell.contentView.subviews) {  
50.         [subView removeFromSuperview];  
51.     }  
52.     NSInteger remainder=indexPath.row%colletionCell;  
53.     NSInteger currentRow=indexPath.row/colletionCell;  
54.     CGFloat   currentHeight=[hArr[indexPath.row] floatValue];  
55.       
56.     CGFloat positonX=(screenWidth/colletionCell-8)*remainder+5*(remainder+1);  
57.     CGFloat positionY=(currentRow+1)*5;  
58.     for (NSInteger i=0; i<currentRow; i++) {  
59.         NSInteger position=remainder+i*colletionCell;  
60.         positionY+=[hArr[position] floatValue];  
61.     }  
62.     cell.frame = CGRectMake(positonX, positionY,screenWidth/colletionCell-8,currentHeight) ;//重新定义cell位置、宽高  
63.       
64.     [cell.contentView addSubview:label];  
65.     return cell;  
66. }  
67.   
68. #pragma mark --UICollectionViewDelegateFlowLayout  
69.   
70. //定义每个Item 的大小  
71. - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath  
72. {  
73.     CGFloat height=100+(arc4random()%120);  
74.     [hArr addObject:[NSString stringWithFormat:@"%f",height]];  
75.     return  CGSizeMake(screenWidth/colletionCell-8, height);  //设置cell宽高  
76. }  
77.   
78. //定义每个UICollectionView 的 margin  
79. -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section  
80. {  
81.     return UIEdgeInsetsMake(0,0, 0, 0);  
82. }  
83.   
84. #pragma mark --UICollectionViewDelegate  
85.   
86. //UICollectionView被选中时调用的方法  
87. -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath  
88. {  
89.     UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];  
90.     cell.backgroundColor = [UIColor greenColor];  
91. }  
92.   
93. //返回这个UICollectionView是否可以被选择  
94. -(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath  
95. {  
96.     return YES;  
97. }  
98.   
99.   
100.   
101. @end  

实现结果：