原帖子:華山論劍之淺談iOS瀑布流

我是模仿上面的代碼自己寫了一份，實現的是簡單的瀑布流：
就是把UICollectionView分成三列，由數組保存每一列的高度，然后每次設置UICollectionViewLayoutAttributes的時候，獲取最短一列，計算出圖片的size，然后添加到最短一列上面。
注：這里是沒有實現橫向的瀑布流

ViewController.m

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"WaterFall Flow";
    
    // 設置 UICollectionViewLayout
    WaterFallLayout *flowLayout = [[WaterFallLayout alloc] init];
    flowLayout.delegate = self;
    CGFloat width = ([UIScreen mainScreen].bounds.size.width - 40) / 3;
    flowLayout.itemSize = CGSizeMake(width, width);
    // 間隙
    flowLayout.insertItemSpacing = 10;
    // 內邊距
    flowLayout.sectionInsets = UIEdgeInsetsMake(10, 10, 10, 10);
    // 列數
    flowLayout.numberOfColumn = 3;
    
    self.flowCV.collectionViewLayout = flowLayout;
    
    // Register Cell
    UINib *cellNib = [UINib nibWithNibName:@"FlowCollectionViewCell" bundle:[NSBundle mainBundle]];
    [self.flowCV registerNib:cellNib forCellWithReuseIdentifier:@"CELL"];
    
    [self parserJsonData];
}


#pragma mark - UICollectionViewDataSource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return [self.itemArray count];
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    FlowCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CELL" forIndexPath:indexPath];
    FlowModel *model = self.itemArray[indexPath.item];
    [cell.imageView sd_setImageWithURL:[NSURL URLWithString:model.thumbURL]];
    return cell;
}

WaterFallLayout.m

@interface WaterFallLayout()
// 所有Item的數量
@property (nonatomic,assign) NSUInteger numberOfItems;
// 這是一個數組，保存每一列的高度
@property (nonatomic,strong) NSMutableArray *columnHeights;
// 這是一個數組，數組中保存的是一種類型，這種類型決定item的位置和大小。
@property (nonatomic,strong )NSMutableArray *itemAttributes;
// 獲取最長列索引
- (NSInteger)indexForLongestColumn;
// 獲取最短列索引
- (NSInteger)indexForShortestColumn;
@end

#pragma mark - UICollectionViewLayout
- (void)prepareLayout{
    [super prepareLayout];
    
    // 初始化所有高度
    for (int i = 0; i < self.numberOfColumn; i++) {
        self.columnHeights[i] = @(self.sectionInsets.top);
    }
    
    // 獲取item數量
    self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
    
    // 循環計算每一個item的x,y,width,height
    for (int i = 0; i < self.numberOfItems; i++) {
        /*
         這里分成三列，每計算一個Item，就取高度最短的那一列，放圖片上去(這里圖片寬度一致)，依次疊加
         */
        
        // 獲取最短列
        NSInteger shortIndex = [self indexForShortestColumn];
        
        // 獲取最短列高度
        CGFloat shortestH = [self.columnHeights[shortIndex] floatValue];
        
        // x
        CGFloat detalX = self.sectionInsets.left + (self.itemSize.width + self.insertItemSpacing) * shortIndex;
        
        // y
        CGFloat detalY = shortestH + self.insertItemSpacing;
        
        // h
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        
        CGFloat itemHeight = 0;
        if (self.delegate != nil && [self.delegate respondsToSelector:@selector(heightForItemIndexPath:)]){
            itemHeight = [self.delegate heightForItemIndexPath:indexPath];
        }
        
        // 保存item frame屬性的對象
        UICollectionViewLayoutAttributes *attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
        attr.frame = CGRectMake(detalX, detalY, self.itemSize.width, itemHeight);
        
        // 放入數組
        [self.itemAttributes addObject:attr];
        
        // 更新列高度
        self.columnHeights[shortIndex] = @(detalY + itemHeight);
    }
}

// 計算contentSize
- (CGSize)collectionViewContentSize{
    // 獲取最高列
    NSInteger longestIndex = [self indexForLongestColumn];
    CGFloat longestH = [self.columnHeights[longestIndex] floatValue];
    
    // 計算contentSize
    CGSize contentSize = self.collectionView.frame.size;
    contentSize.height = longestH + self.sectionInsets.bottom;
    
    return contentSize;
}

- (NSArray*)layoutAttributesForElementsInRect:(CGRect)rect{
    return self.itemAttributes;
}

實現之后的效果圖:

只有縱向的瀑布流