瀑布流的简单实现

Posted 黄建军的技术博客

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了瀑布流的简单实现相关的知识,希望对你有一定的参考价值。

详细代码请前往: https://git.oschina.net/null_248_6948/WaterfallLayout

 

extension WaterfallLayout {

    //     prepare准备所有Cell的布局样式

    override func prepare() {

        super.prepare()

        

        //         0.获取item的个数

        let itemCount = collectionView!.numberOfItems(inSection: 0)

        

        //         1.获取列数

        let cols = dataSource?.numberOfColsInWaterfallLayout?(self) ?? 2

        

        //         2.计算Item的宽度

        let itemW = (collectionView!.bounds.width - self.sectionInset.left - self.sectionInset.right - self.minimumInteritemSpacing * CGFloat((cols - 1))) / CGFloat(cols)

        

        //         3.计算所有的item的属性

        for i in startIndex..<itemCount {

            //             1.设置每一个Item位置相关的属性

            let indexPath = IndexPath(item: i, section: 0)

            

            //             2.根据位置创建Attributes属性

            let attrs = UICollectionViewLayoutAttributes(forCellWith: indexPath)

            

            //             3.随机一个高度

            guard let height = dataSource?.waterfallLayout(self, indexPath: indexPath) else {

                fatalError("请设置数据源,并且实现对应的数据源方法")

            }

            

            //             4.取出最小列的位置

            var minH = colHeights.min()!

            let index = colHeights.index(of: minH)!

            minH = minH + height + minimumLineSpacing

            colHeights[index] = minH

            

            //             5.设置item的属性

            attrs.frame = CGRect(x: self.sectionInset.left + (self.minimumInteritemSpacing + itemW) * CGFloat(index), y: minH - height - self.minimumLineSpacing, width: itemW, height: height)

            attrsArray.append(attrs)

        }

        

        //         4.记录最大值

        maxH = colHeights.max()!

        

        //         5.startIndex重新复制

        startIndex = itemCount

    }

}

以上是关于瀑布流的简单实现的主要内容,如果未能解决你的问题,请参考以下文章

flex布局实现瀑布流排版

wordpress制作照片瀑布流的效果,如何实现?

74.js---移动端文章的瀑布流的实现。

UICollectionView瀑布流的实现

UICollectionView瀑布流的实现原理(转)

javascript自适应宽度的瀑布流实现思路