前言：

忙里偷閑今膊，忽然想起以前自己實現(xiàn)的一個瀑布流功能些阅，就拿出來完善了下；說起這個瀑布流斑唬，還是在以前自己還是iOS開發(fā)小白的時候市埋，學(xué)習(xí)來的，后來我自己動手模仿蘋果API里自帶的布局類寫法恕刘，重新實現(xiàn)了下缤谎，方便大家可以更熟悉的使用，話不多說褐着，進(jìn)入正題坷澡。

一、準(zhǔn)備

1含蓉、首先準(zhǔn)備好plist文件频敛，以及需要用到的工具類，工具類可以自己下載導(dǎo)入馅扣，也可以cocoapods導(dǎo)入

1533266010749.jpg

1533266033205.jpg

1533266147661.jpg

1533266173431.jpg

2斟赚、接著創(chuàng)建我們的布局類WaterFallFlowLayout，繼承于UICollectionViewLayout岂嗓，既然是模仿汁展，那我們就要設(shè)定好對應(yīng)的屬性和代理方法，如下圖:

1533266493595.jpg

以及我們的數(shù)組和初始化

1533266583321.jpg

二厌殉、實現(xiàn)

實現(xiàn)自定義布局食绿，我們需要實現(xiàn)布局類里的四個方法，如下：
1公罕、- (void)prepareLayout {......}
具體實現(xiàn)代碼如下

//初始化加載器紧，每次刷新也都會加載
- (void)prepareLayout {
    [super prepareLayout];
    //刷新時清空item屬性數(shù)組
    [self.attributes removeAllObjects];
    //刷新時清空列高數(shù)組
    [self.itemHeights removeAllObjects];
    //添加每列的默認(rèn)起始高度
    for (int i = 0; i < kScreenWidth/self.itemWidth; i++) {
        [self.itemHeights addObject:@(self.minimumLineSpacing + self.headerReferenceSize.height + self.sectionInset.top)];
    }
    //獲取collectionView的所有區(qū)數(shù)量
    NSUInteger sectionCount = [self.collectionView numberOfSections];
    //獲取collectionView的所有單元格數(shù)量
    for (int i = 0; i < sectionCount; i++) {
        //獲取每個區(qū)的單元格數(shù)量
        NSUInteger itemCount = [self.collectionView numberOfItemsInSection:i];
        for (int j = 0; j < itemCount; j++) {
            //得到每個單元格布局屬性
            UICollectionViewLayoutAttributes *attribute = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:j inSection:i]];
            //添加進(jìn)布局屬性數(shù)組中
            [self.attributes addObject:attribute];
        }
    }
    
}

2、- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {......}
具體實現(xiàn)代碼如下：

//返回每個單元格的布局屬性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    //創(chuàng)建每個單元格的布局屬性
    UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    //計算高h(yuǎn)eight
    CGFloat height = 0;
    if (self.delegate) {
        height = [self.delegate waterFallFlowLayout:self heightForItemAtIndexPath:indexPath width:self.itemWidth];
    }
    //計算坐標(biāo)x和y,需要找到最小的列高值和列號楼眷，所以需要一個數(shù)組來存放所有的列高
    //聲明一個列號代表我們需要尋找的最小的列高值,默認(rèn)為0
    NSUInteger minColumn = 0;
    //聲明一個最小的列高值铲汪，獲取第0列的列高值熊尉，默認(rèn)為最小的
    CGFloat minItemHeight = [self.itemHeights[0] floatValue];
    //for循環(huán)尋找最小的列高值和列號
    for (int i = 1; i < kScreenWidth/self.itemWidth; i++) {
        CGFloat itemHeight = [self.itemHeights[i] floatValue];
        if (itemHeight < minItemHeight) {
            minItemHeight = itemHeight;
            minColumn = i;
        }
    }
    //for循環(huán)結(jié)束，最小的列號和列高值就確定了掌腰，此時先計算坐標(biāo)x
    CGFloat x = self.sectionInset.left + minColumn * self.minimumInteritemSpacing + minColumn * self.itemWidth;
    //此時坐標(biāo)y也就確定了
    CGFloat y;
    //獲得列數(shù)
    NSUInteger columnCount = kScreenWidth/self.itemWidth;
    if (indexPath.item/columnCount == 0) {
        if (indexPath.section == 0) {
            y = self.headerReferenceSize.height + minItemHeight;
        } else {
            y = minItemHeight;
        }
    } else {
        y = self.minimumLineSpacing + minItemHeight;
    }
    //設(shè)置每個單元格的大小
    attribute.frame = CGRectMake(x, y, self.itemWidth, height);
    //更新列高數(shù)組中的的高度
    self.itemHeights[minColumn] = @(CGRectGetMaxY(attribute.frame));
    return attribute;
}

3狰住、第三個方法比較簡單，直接貼代碼

//返回布局屬性數(shù)組
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
    return self.attributes;
}

4齿梁、- (CGSize)collectionViewContentSize {......}
具體實現(xiàn)代碼如下：

//返回集合視圖內(nèi)容大小
- (CGSize)collectionViewContentSize {
    CGFloat maxItemHeight = [self.itemHeights[0] floatValue];
    for (int i = 1; i < kScreenWidth/self.itemWidth; i++) {
        CGFloat height = [self.itemHeights[i] floatValue];
        if (maxItemHeight < height) {
            maxItemHeight = height;
        }
    }
    CGFloat collectionViewHeight = maxItemHeight + self.headerReferenceSize.height + self.footerReferenceSize.height + self.sectionInset.bottom;
    return CGSizeMake(kScreenWidth, collectionViewHeight);
}

三催植、運行

主界面添加上集合視圖，實現(xiàn)功能勺择，具體使用很簡單创南，就不多說，直接上運行結(jié)果省核，如下圖：

1533267511446.jpg

大功告成稿辙！

四、最后

附上demo：WaterFallFlowLayout

iOS開發(fā)-瀑布流

iOS開發(fā)-瀑布流

前言：

一、準(zhǔn)備

二厌殉、實現(xiàn)

三催植、運行

四、最后