一、瀑布流

什么是瀑布流??？就是這樣
這是我上傳的完整的demo，實(shí)現(xiàn)方法也比較清爽，順便賺點(diǎn)積分哈
http://download.csdn.net/detail/u010330109/9449986

總體思想讓我捋一捋
三個類，
自定義的cell類UICollectionViewCell，
自定義的布局UICollectionViewLayout類，
以及一個UICollectionView

1.自定義的cell
這個類里面比較簡單，給cell加個imageView，讓imageView的frame與cell相同，cell會根據(jù)圖片大小計算高度。

2.自定義布局
（1）一個協(xié)議代理，將RootVC（里面添加的UICollectionView）中根據(jù)將要添加的圖片大小，計算出的cell高度，返回給布局文件
（2）寫在.m延展的屬性，也可以寫在.h
@property (nonatomic,retain)NSMutableArray *allAttributeArray;//保存所有計算好位置的cell的布局屬性@property (nonatomic,retain)NSMutableArray *allHeightColumnArray;//保存所有列的高度，用來尋找最長列和最短列
（3）寫在.h的屬性
//代理屬性@property (nonatomic,assign)id<WaterFallLayoutDelegate>delegate;//確定有多少列@property (nonatomic,assign)NSInteger numberColumn;
//cell大小@property (nonatomic,assign)CGSize itemSize;
//列間距@property (nonatomic,assign)CGFloat columnSpacing;
//行間距@property (nonatomic,assign)CGFloat lineSpacing;
//分區(qū)間距@property (nonatomic,assign)UIEdgeInsets sectionEdgeInset;

（4）通過allHeightColumnArray計算出各列中最長的和最短的
-(NSInteger)shortestColumn
-(NSInteger)longestColumn
（5）計算每一個cell的大小和位置，這里是核心

-(void)customLayoutCell  
{  
    //為每一列賦初值  
    for (int i = 0; i < self.numberColumn; i++) {  
        self.allHeightColumnArray[i] = @(self.sectionEdgeInset.top);  
    }  
    //得到cell的總個數(shù)  
    long sumCells = [self.collectionView numberOfItemsInSection:0];          
    //計算每一個cell的位置和大小  
    for (int i = 0; i < sumCells; i++) {  
        //計算cell的x值  
        //step_1:取得所要最短列是哪一列  
        NSInteger shortestIndex = self.shortestColumn;  
          
        //step_2:計算x 左側(cè)距邊緣+（cell的寬度+列間距）*當(dāng)前列數(shù)  
        CGFloat short_X = self.sectionEdgeInset.left + (self.itemSize.width +self.columnSpacing)*shortestIndex;  
        //確定y值,最短列的高度+行間距  
        CGFloat short_Y = [self.allHeightColumnArray[shortestIndex] floatValue]+ self.lineSpacing;  
          
        //寬度的大小是確定的不需要計算  
        //self.itemSize.width;  
          
        //高度cell的計算  
        CGFloat short_Height = 0.0;  
          
        //確定是第幾個cell  
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];  
          
        //判斷代理和方法是否存在  
        if (self.delegate && [self.delegate respondsToSelector:@selector(collectionViewWithLayout:indexPath:)]) {  
          
            //執(zhí)行代理方法計算當(dāng)前cell的高度  
            short_Height = [self.delegate collectionViewWithLayout:self indexPath:indexPath];  
        }  
          
        //至此cell的frame已經(jīng)確定  
        //該屬性保存某個cell的布局屬性  
        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];            
        attributes.frame = CGRectMake(short_X, short_Y, self.itemSize.width, short_Height);  
          
        //添加到數(shù)組  
        [self.allAttributeArray addObject:attributes];  
          
        //更新當(dāng)前列的長度 當(dāng)前cell的y+height  
        self.allHeightColumnArray[shortestIndex] = @(short_Y + short_Height);  
    }     
}  

（6）自定義布局需要實(shí)現(xiàn)的系統(tǒng)方法
//開始布局-(void)prepareLayout
//返回所有cell的布局屬性-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
//計算contentSize，滾動范圍會隨著某一列cell的總高度，也就是最長的一列，變化-(CGSize)collectionViewContentSize

3.UICollectionView
（1）首先把協(xié)議遵守了把代理方法實(shí)現(xiàn)了//計算所需的高度-(CGFloat)collectionViewWithLayout:(WaterFallLayout *)layout indexPath:(NSIndexPath *)indexPath

（2）在viewDidLoad把布局類基本設(shè)置和UICollectionView的初始化，代理，寫了

- (void)viewDidLoad {  
    [super viewDidLoad];  
      
    self.view.backgroundColor = [UIColor blueColor];  
      
    [self parserJson];  
      
    //初始化布局類  
    WaterFallLayout *customLayout = [[WaterFallLayout alloc]init];  
  
    //設(shè)置列數(shù)  
    customLayout.numberColumn = 3;  
      
    //設(shè)置行間距  
    customLayout.lineSpacing = 10;  
      
    //列間距  
    customLayout.columnSpacing = 10;  
  
    //設(shè)置分區(qū)間距  
    customLayout.sectionEdgeInset = UIEdgeInsetsMake(10, 10, 10, 10);  
      
    //計算寬度:（總寬 - 左側(cè)edge - 列間距*列數(shù) - 右側(cè)edge）/列數(shù)  
    CGFloat width = (CGRectGetWidth(self.view.frame) - customLayout.sectionEdgeInset.right - customLayout.columnSpacing*(customLayout.numberColumn-1) - customLayout.sectionEdgeInset.right)/3;  
      
    //初始化cell的大小,高度是動態(tài)計算的，這里隨便給  
    customLayout.itemSize = CGSizeMake(width, width);  
      
    //初始化collectionView  
    UICollectionView *myCollectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:customLayout];        
    myCollectionView.tag =1000;  
      
    //設(shè)置代理  
    myCollectionView.delegate = self;  
    myCollectionView.dataSource = self;  
    customLayout.delegate = self;  
      
    //添加集合視圖  
    [self.view addSubview:myCollectionView];  
      
    //注冊單元格  
    [myCollectionView registerClass:[CustomCollectionViewCell class] forCellWithReuseIdentifier:@"item"];        
}  

（3）一個從json文件取url的方法，這樣就能通過url從網(wǎng)上讀圖片了
從網(wǎng)上加載圖片，要設(shè)置info.plist
添加App Transport Security Settings
設(shè)置Allow Arbitrary Loads 為YES
（4）填充cell

整個代碼確實(shí)比較多，上傳到資源里面，賺點(diǎn)積分