iOS橫向瀑布流的封裝

　　前段時間, 做一個羡慕, 需要使用到瀑布流! 說道瀑布流, 或許大家都不陌生, 瀑布流的實現也有很多種! 從scrollView 到 tableView 書寫的瀑布流, 然后再到2012年iOS6 蘋果API 新加進的collectionView進行的瀑布流封裝! 確實, 不論是寫起來還是用起來都要方便很多!

　　由於項目開發中需要使用到很像瀑布流, 本來想着懶省事, 直接搜一個第三方, 可搜了一會, 並沒有搜到有關橫向瀑布流的第三方! 於是就決定自己寫一個吧! 里邊用到的就是UICollecitionViewFlowLayout 的一個UICollectionViewLayoutAttributes 這個屬性! 

　　要明白瀑布流的原理, 寫起來就會方便很多! 我下代碼, 就是喜歡加多注釋, 能夠方便自己去找問題, 也能把當時的思路給記下來! 所以, 代碼看起來, 好多綠色的中文注釋, 或許對大神來說, 很弱! 但是, 能然自己讀懂, 讓大家讀懂就夠了!哈哈, 廢話不多說! 直接上代碼了! 思路還有實現步驟全在代碼里!

　　.h 生命中只需要傳入一個 你所需要橫向瀑布流的行數, 還有一個model類的數組, model類是你自己定義的, 里邊有圖片的寬高,就可以了!

　　有什么疑問, 或者寫的不對的地方, 希望提出來, 我虛心學習, 向大家探討探討

//
//  JF HorizontalWaterFlowLayout.h
//  ArtWorld
//
//  Created by laouhn on 15/10/29.
//  Copyright © 2015年 Jesonliu. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface JF_HorizontalWaterFlowLayout : UICollectionViewFlowLayout

// 總行數
@property (nonatomic, assign) NSInteger rowCount;
// 商品數據數組
@property (nonatomic, strong) NSArray *modelList;

@end

//
//  JF HorizontalWaterFlowLayout.m
//  ArtWorld
//
//  Created by laouhn on 15/10/29.
//  Copyright © 2015年 Jesonliu. All rights reserved.
//

#import "JF HorizontalWaterFlowLayout.h"
#import "ArtCollectionViewCellModel.h"

@interface JF_HorizontalWaterFlowLayout ()
@property (nonatomic, assign) CGFloat remmenberW;

// 所有item的屬性的數組
@property (nonatomic, strong) NSArray *layoutAttributesArray;  // 定義布局屬性的數組, 用來存放布局item 的屬性

@end

@implementation JF_HorizontalWaterFlowLayout
/**
 *  布局准備方法 當collectionView的布局發生變化時 會被調用
 *  通常是做布局的准備工作 itemSize.....
 *  UICollectionView 的 contentSize 是根據 itemSize 動態計算出來的
 */

- (void)prepareLayout {
    [super prepareLayout];
    // 根據行數 計算item的高度 所有item 的高度是一樣的
    // 內容頁的高度
    CGFloat contenHeight = self.collectionView.bounds.size.height - self.sectionInset.top - self.sectionInset.bottom;
    // 行與行之間的距離
    CGFloat marginY = self.minimumLineSpacing;
    // item 的高度
    CGFloat itemHeight = (contenHeight - marginY * (self.rowCount - 1)) / self.rowCount;
    // 計算布局屬性
    [self computeAttributesWithItemWith:itemHeight];
}


/**
    根據itemHeight 計算布局屬性
 */
- (void)computeAttributesWithItemWith:(CGFloat)itemHeight {
    // 定義一個行寬數組 記錄每一行的總寬度
    CGFloat rowWidth[self.rowCount];
    // 定義一個記錄每一行的總item個數數組
    NSInteger rowItemCount[self.rowCount];                      // 此處為C語言格式, 定義兩個數組, 元素個數為self.rowCount, 數組類型為CGFloat 和 NSInteger
    
    // 初始化
    for (int i = 0; i < self.rowCount; i++) {
        rowWidth[i] = self.sectionInset.left; // 行寬 要加上分區距離左邊的距離 所以初始距離 只有分區距左邊的距離
        rowItemCount[i] = 0;                  // 初始化時, 是每一行item 的個數為零, 清空數組元素內容
    }
    
    // 遍歷modelList 數組, 計算相關屬性
    NSInteger index = 0;  // 定義索引變量, 初始值為零
    
    NSMutableArray *attributesArray = [NSMutableArray arrayWithCapacity:self.modelList.count];  // 定義一個可變存儲布局屬性的數組, 並開辟空間大小為self.modelList.count個空間
    
    // 遍歷self.modelList 數組, 得到model 類, 獲取屬性
    for (ArtCollectionViewCellModel *model in self.modelList) {

        // 創建路徑, 記錄item 所在分區分區和位置
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:index inSection:0];
        
        // 根據路徑創建對應的布局屬性
        UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        
        // 找出最短的行號
        NSInteger row = [self shortestRow:rowWidth];
        
        // 追加在最短行, 使記錄每一行的總item個數數組中最短行對應的元素個數 +1
        rowItemCount[row]++;
        
        // X值
        CGFloat itemX = rowWidth[row]; // 最短行的總寬度
        
        // Y值
        CGFloat itemY = (itemHeight + self.minimumLineSpacing) * row + self.sectionInset.top; // 計算, 注意邏輯性
        
        // 等比例縮放 計算item 的寬度
        CGFloat itemW = ([model.worksWidth floatValue] / [model.worksHeight floatValue]) * itemHeight; // 顯示寬 / 顯示高 = 實際寬 / 實際高
        // 賦給布局屬性的frame
        attributes.frame = CGRectMake(itemX, itemY, itemW, itemHeight);

        // 添加到布局屬性的數組中
        [attributesArray addObject:attributes];
        
        // 使列寬增加, 增量為item 自身的寬度, 加上兩個item 之間的最小距離
        rowWidth[row] += itemW + self.minimumInteritemSpacing;
        
        // 是索引+1
        index++;
    }
    
    
//     找出 最寬行的行號
    NSInteger row = [self widthestRow:rowWidth];
    
    self.remmenberW =  rowWidth[row];
    
    // 根據最寬行設置itemSize 使用總寬度的平均值
    CGFloat itemW = (rowWidth[row] - self.minimumInteritemSpacing * rowItemCount[row]) / rowItemCount[row];
    
    self.itemSize = CGSizeMake(itemW, itemHeight);
    
    // 給屬性數組設置數值
    self.layoutAttributesArray = attributesArray.copy;
    
}

// 找出rowWidth 數組中最短行號 追加數據的時候 追加在最短行中
- (NSInteger)shortestRow:(CGFloat *)rowWidth {
    CGFloat max = CGFLOAT_MAX;
    NSInteger row = 0;
    for (int i = 0; i < self.rowCount; i++) {
        if (rowWidth[i] < max) {
            max = rowWidth[i];
            row = i;
        }
    }
    return row;  // 返回最短的行
}

// 找出rowWidth 數組中最寬的行號
- (NSInteger)widthestRow:(CGFloat *)rowWidth {
    CGFloat min = 0;
    NSInteger row = 0;
    for (int i = 0; i < self.rowCount; i++) {
        if (rowWidth[i] > min) {
            min = rowWidth[i];
            row = i;
        }
    }
    return row;
}


/**
 *  跟蹤效果：當到達要顯示的區域時 會計算所有顯示item的屬性
 *           一旦計算完成 所有的屬性會被緩存 不會再次計算
 *  @return 返回布局屬性(UICollectionViewLayoutAttributes)數組
 */
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    
    // 直接返回計算好的布局屬性數組
    return self.layoutAttributesArray;
}

// 重寫此方法, 改變collectionView的contentSize
- (CGSize )collectionViewContentSize{
    return CGSizeMake(self.remmenberW, self.collectionView.bounds.size.height);
}




@end