【iOS开发】collectionView 瀑布流实现

一、效果展示

二、思路分析

　　1> 布局的基本流程

　　当设置好collectionView的布局方式之后(UICollectionViewFlowLayout),当系统开始布局的时候，会调用 prepareLayout 来布局　　

- (void)prepareLayout;

　　与此同时，collectionViewCell 的每个控件的布局属性都会调用 以下方法来设置(可以重写方法来修改每个cell 的数值)

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

　　2> 每列 的高度计算方式

　　　　1.计算所有的cell 的高度，然后平均下来，得到itemSize 然后计算每列的高度-----> 该方法不够精确，而且极端情况下会相差太大

　　　　2.每次计算cell 的时候，找出高度最低的那一列，优先添加到该列，然后依次计算------> 该方法误差较小

　　Tip: 在collectionView中，contentSize 就是一个摆设，不能根据这个来计算 collectionView 的大小，系统会自动的根据 itemSize 来计算

三、核心代码实现

　　

 //
 //  WaterFall.h
 //  瀑布流
 //
 //  Created by gxiangzi on 15/9/16.
 //  Copyright © 2015年 hqu. All rights reserved.
 //

 #import <UIKit/UIKit.h>

 @interface WaterFall : UICollectionViewFlowLayout

 // 计算列数
 @property (assign, nonatomic) NSInteger columCount;
 // 所有的模型数组
 @property (strong, nonatomic) NSArray * dataList;

 @end

 //
 //  WaterFall.m
 //  瀑布流
 //
 //  Created by gxiangzi on 15/9/16.
 //  Copyright © 2015年 hqu. All rights reserved.
 //

 /**

  // 获得高度的办法
     1. 计算总的高度，然后计算每个高度，最后设置itemsize 来计算
     2. 找出最高的列，然后根据最高的列来计算
  注意：collectionView 的contentView 是一个摆设，没有实际效果，需要根据 itemSize 来计算

  */

 #import "WaterFall.h"
 #import "Shop.h"

 @interface WaterFall ()

 @property (nonatomic,strong) NSMutableArray * itemsAttribute;

 @end

 @implementation WaterFall

 -(void)prepareLayout
 {
     [super prepareLayout];

 //    self.sectionFootersPinToVisibleBounds = YES;

     // 计算每列的宽度
     CGFloat contentWidth = self.collectionView.bounds.size.width - self.sectionInset.left - self.sectionInset.right;
         CGFloat colWidth = (contentWidth - (self.columCount - ) * self.minimumInteritemSpacing) / self.columCount;
     self.minimumInteritemSpacing = ;
     self.minimumLineSpacing = ;

     [self attribute:colWidth];
 }

 - (void) attribute:(CGFloat) colWidth
 {
     NSInteger colCount[self.columCount];
     CGFloat colHeight[self.columCount];

     ; i<self.columCount; ++i)
     {
         colHeight[i] = ;
         colCount[i] = ;
     }

     // 定义总item高
     CGFloat totoalItemHeight = ;

     // 定义一个可变数组，来存储 素有的属性值
     NSMutableArray * arrayM = [NSMutableArray arrayWithCapacity:self.dataList.count];

     // 计数
     NSInteger index = ;

     // 遍历数组，计算相关的属性
     for (Shop * shop  in self.dataList)
     {

         // 1> 建立布局属性
         NSIndexPath * indexPath = [NSIndexPath indexPathForRow:index inSection:];
         index ++;
         UICollectionViewLayoutAttributes * attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

         // 2.计算当前的列数
         // 计算是第几列
         NSInteger col = [self shortestCol:colHeight];
         // 计算每一列的个数
         colCount[col]++;

         // 3.计算frame
         CGFloat w = shop.w;
         CGFloat h = shop.h * colWidth / w;
         CGFloat x = self.sectionInset.left + (colWidth + self.minimumInteritemSpacing) * col;
         CGFloat y = colHeight[col] + self.minimumLineSpacing;
         // 累加，计算同一列下一个元素的高度
         colHeight[col] += (h + self.minimumLineSpacing);

         attr.frame = CGRectMake(x, y, colWidth, h);

         // 4.计算总的高度
         totoalItemHeight += h;

         // 5.添加到 itemsAttribute
         [arrayM addObject:attr];
     }

     // 计算出最高的那一列
     NSInteger highestCol = [self highestColL:colHeight];
     // 设置 itemSize，使用总高度的平均值
     self.itemSize = CGSizeMake(colWidth, (colHeight[highestCol]- colCount[highestCol] * self.minimumInteritemSpacing) / colCount[highestCol]);

     // 添加页脚属性

     UICollectionViewLayoutAttributes * footer = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:UICollectionElementKindSectionFooter withIndexPath:[NSIndexPath indexPathForRow: inSection:]];
     footer.frame = CGRectMake(, colHeight[highestCol], self.collectionView.bounds.size.width, );

     [arrayM addObject:footer];

     self.itemsAttribute = arrayM;
 }

 /// 返回所有 cell 的属性数组
 - (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
 {
     return self.itemsAttribute;
 }

 /// 获得最少的那一列
 ///
 /// @param colHeight 列高数组
 ///
 /// @return 最少的列号
 - (NSInteger) shortestCol:(CGFloat *)colHeight {
     CGFloat min = MAXFLOAT;
     CGFloat col = ;

     ; i<self.columCount; ++i)
     {
         if (colHeight[i] <  min) {
             min = colHeight[i];
             col = i;
         }
     }
     return col;
 }

 /// 获得最高的那一列
 ///
 /// @param colHeight 列高数组
 ///
 /// @return 最高的列号
 - (NSInteger) highestColL:(CGFloat *)colHeight {

     CGFloat max = ;
     CGFloat col = ;

     ; i<self.columCount; ++i)
     {
         if(colHeight[i] > max)
         {
             max = colHeight[i];
             col = i;
         }
     }

     return col;
 }

 #pragma mark - 懒加载 属性数组
 - (NSMutableArray *)itemsAttribute
 {
     if (_itemsAttribute == nil)
     {
         _itemsAttribute = [NSMutableArray array];
     }
     return _itemsAttribute;
 }

 @end