iOS 瀑布流

1.简单认识

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。

1429074-1957143332caad52.gif

2.3种实现的方法

屏幕快照 2017-01-23 下午3.59.58.png

屏幕快照 2017-01-23 下午4.00.25.png

屏幕快照 2017-01-23 下午4.01.03.png

3.详解UICollectionView实现瀑布流

精髓就在于UICollectionViewLayout，因此我们要自定义一个layout来继承系统的UICollectionViewLayout，所有工作都在这个类中进行

3.1定义所需要的属性

瀑布流的思路就是，从上往下，那一列最短，就把下一个item放在哪一列，因此我们需要定义一个字典来记录每一列的最大y值；
每一个item都有一个attributes，因此定义一个数组来保存每一个item的attributes；
我们还必须知道有多少列以及列间距、行间距、section到collectionView的边距。

1429074-a9e7dc0bd2e41b7e.png

屏幕快照 2017-01-23 下午4.05.25.png

3.2可能需要写的4个方法
原理详细看文章： http://www.jianshu.com/p/b92e1b1073fd

屏幕快照 2017-01-23 下午4.33.28.png

3.3例子
自定义Layout：

屏幕快照 2017-01-23 下午4.41.04.png

屏幕快照 2017-01-23 下午4.42.26.png

屏幕快照 2017-01-23 下午4.42.53.png

调用的控制器：

屏幕快照 2017-01-23 下午4.43.17.png

效果：

屏幕快照 2017-01-23 下午4.52.24.png

4.第三库实现瀑布流

CHTCollectionViewWaterfallLayout
https://github.com/chiahsien/CHTCollectionViewWaterfallLayout
控制器中代码：（cell...代码不展示了）

屏幕快照 2017-01-23 下午5.07.57.png

屏幕快照 2017-01-23 下午5.08.45.png

屏幕快照 2017-01-23 下午5.09.26.png

效果：

屏幕快照 2017-01-23 下午5.04.25.png

屏幕快照 2017-01-23 下午5.04.36.png

XRWaterfallLayout
https://github.com/codingZero/XRWaterfallLayout