【IOS开发】collectionView 瀑布流实现

- (void)prepareLayout;

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

 1 //
 2 //  WaterFall.h
 3 //  瀑布流
 4 //
 5 //  Created by gxiangzi on 15/9/16.
 6 //  Copyright © 2015年 hqu. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 @interface WaterFall : UICollectionViewFlowLayout
12 
13 // 计算列数
14 @property (assign, nonatomic) NSInteger columCount;
15 // 所有的模型数组
16 @property (strong, nonatomic) NSArray * dataList;
17 
18 @end

  1 //
  2 //  WaterFall.m
  3 //  瀑布流
  4 //
  5 //  Created by gxiangzi on 15/9/16.
  6 //  Copyright © 2015年 hqu. All rights reserved.
  7 //
  8 
  9 /**
 10  
 11  // 获得高度的办法
 12     1. 计算总的高度，然后计算每个高度，最后设置itemsize 来计算
 13     2. 找出最高的列，然后根据最高的列来计算
 14  注意：collectionView 的contentView 是一个摆设，没有实际效果，需要根据 itemSize 来计算
 15   
 16  */
 17 
 18 #import "WaterFall.h"
 19 #import "Shop.h"
 20 
 21 @interface WaterFall ()
 22 
 23 @property (nonatomic,strong) NSMutableArray * itemsAttribute;
 24 
 25 @end
 26 
 27 @implementation WaterFall
 28 
 29 -(void)prepareLayout
 30 {
 31     [super prepareLayout];
 32     
 33 //    self.sectionFootersPinToVisibleBounds = YES;
 34     
 35     // 计算每列的宽度
 36     CGFloat contentWidth = self.collectionView.bounds.size.width - self.sectionInset.left - self.sectionInset.right;
 37         CGFloat colWidth = (contentWidth - (self.columCount - 1) * self.minimumInteritemSpacing) / self.columCount;
 38     self.minimumInteritemSpacing = 10;
 39     self.minimumLineSpacing = 10;
 40     
 41     [self attribute:colWidth];
 42 }
 43 
 44 - (void) attribute:(CGFloat) colWidth
 45 {
 46     NSInteger colCount[self.columCount];
 47     CGFloat colHeight[self.columCount];
 48     
 49     for (int i=0; i<self.columCount; ++i)
 50     {
 51         colHeight[i] = 0;
 52         colCount[i] = 0;
 53     }
 54     
 55     
 56     // 定义总item高
 57     CGFloat totoalItemHeight = 0;
 58     
 59     // 定义一个可变数组，来存储 素有的属性值
 60     NSMutableArray * arrayM = [NSMutableArray arrayWithCapacity:self.dataList.count];
 61 
 62     // 计数
 63     NSInteger index = 0;
 64     
 65     // 遍历数组，计算相关的属性
 66     for (Shop * shop  in self.dataList)
 67     {
 68         
 69         // 1> 建立布局属性
 70         NSIndexPath * indexPath = [NSIndexPath indexPathForRow:index inSection:0];
 71         index ++;
 72         UICollectionViewLayoutAttributes * attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
 73         
 74         // 2.计算当前的列数
 75         // 计算是第几列
 76         NSInteger col = [self shortestCol:colHeight];
 77         // 计算每一列的个数
 78         colCount[col]++;
 79         
 80         // 3.计算frame
 81         CGFloat w = shop.w;
 82         CGFloat h = shop.h * colWidth / w;
 83         CGFloat x = self.sectionInset.left + (colWidth + self.minimumInteritemSpacing) * col;
 84         CGFloat y = colHeight[col] + self.minimumLineSpacing;
 85         // 累加，计算同一列下一个元素的高度
 86         colHeight[col] += (h + self.minimumLineSpacing);
 87         
 88         attr.frame = CGRectMake(x, y, colWidth, h);
 89        
 90         // 4.计算总的高度
 91         totoalItemHeight += h;
 92         
 93         // 5.添加到 itemsAttribute
 94         [arrayM addObject:attr];
 95     }
 96     
 97     // 计算出最高的那一列
 98     NSInteger highestCol = [self highestColL:colHeight];
 99     // 设置 itemSize，使用总高度的平均值
100     self.itemSize = CGSizeMake(colWidth, (colHeight[highestCol]- colCount[highestCol] * self.minimumInteritemSpacing) / colCount[highestCol]);
101 
102     // 添加页脚属性
103 
104     UICollectionViewLayoutAttributes * footer = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:[NSIndexPath indexPathForRow:0 inSection:0]];
105     footer.frame = CGRectMake(0, colHeight[highestCol], self.collectionView.bounds.size.width, 50);
106     
107     [arrayM addObject:footer];
108     
109     self.itemsAttribute = arrayM;
110 }
111 
112 
113 /// 返回所有 cell 的属性数组
114 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
115 {
116     return self.itemsAttribute;
117 }
118 
119 /// 获得最少的那一列
120 ///
121 /// @param colHeight 列高数组
122 ///
123 /// @return 最少的列号
124 - (NSInteger) shortestCol:(CGFloat *)colHeight {
125     CGFloat min = MAXFLOAT;
126     CGFloat col = 0;
127     
128     for (int i=0; i<self.columCount; ++i)
129     {
130         if (colHeight[i] <  min) {
131             min = colHeight[i];
132             col = i;
133         }
134     }
135     return col;
136 }
137 
138 /// 获得最高的那一列
139 ///
140 /// @param colHeight 列高数组
141 ///
142 /// @return 最高的列号
143 - (NSInteger) highestColL:(CGFloat *)colHeight {
144     
145     CGFloat max = 0;
146     CGFloat col = 0;
147     
148     for (int i=0; i<self.columCount; ++i)
149     {
150         if(colHeight[i] > max)
151         {
152             max = colHeight[i];
153             col = i;
154         }
155     }
156     
157     return col;
158 }
159 
160 
161 #pragma mark - 懒加载 属性数组
162 - (NSMutableArray *)itemsAttribute
163 {
164     if (_itemsAttribute == nil)
165     {
166         _itemsAttribute = [NSMutableArray array];
167     }
168     return _itemsAttribute;
169 }
170 
171 @end