05.自定义瀑布流

   自定义了一个UICollectionVIewFlowlayout的子类,在使用的时候需要创建自定义flow layout的对象,实现协议方法来实现瀑布流效果

一、原理

     首先,获得图片的尺寸,一般在数据中都会给出图片的尺寸

     计算ItemWIdth,假设瀑布流为两行,  itemWidth = (ScreenWidth - 3 * 间距) / 2.0;

     itemHeight = 图片原先的高 * itemWidth / (图片原来的宽 floatValue);

      设置ItemSize

     计算当前已经排列的两列中那一列最短

      将当前的图片放在上面

     重复执行以上步骤

二、使用

     将文件BHFlowlayout导入

    // 创建
    BHFlowLayout *flowLayout = [[BHFlowLayout alloc] init];
    // 边框
    flowLayout.edgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);
    // 列数
    flowLayout.columnCounts = 2;
    // 列间距
    flowLayout.columnSpace = 5;
    // 行间距
    flowLayout.rowSpace = 5;
   

    // 签协议,BHFlowLayoutDelegate
    // 指定代理人代理人
    flowLayout.delegate = self;

       实现协议方法,指定ItemSize的高度

// 计算Item的高
- (CGFloat)bhFlowLayout:(BHFlowLayout *)flowLayout heightForRowAtIndexPath:(NSIndexPath *)indexPath width:(CGFloat)width{
    // 高 = 原高 * ItemWidth / 原宽
    MediaModel *mVideosModel = self.dataArr[indexPath.row];
    
    CGFloat height = mVideosModel.mVideosHeight * width / mVideosModel.mVideosWidth;
    return height;
}

三、效果图

四、工程下载链接:点击打开链接