UICollectionView之控件瀑布流

UICollectionView 之瀑布流

说起瀑布流,百度上给的词条意识为瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。

我个人粗浅的理解就是,整体的图片看久了可能会给人审美疲劳的感觉,瀑布流,顾名思义,像瀑布一样的流水布局,看起来错落有致,给人以眼前一新的感觉.好了,关于瀑布流就扯这么多, 下面开始说代码把.

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;

这两行代码是理解瀑布流的关键, 第一行的代码含义是获得 可见范围内的 cell 的属性, 第二行的代码还以是获得当前 indexPath.item 的属性.我们要在获得当前indexPath.item 的属性, 并判断当前的 x, y 值,取出最小的 y 值,计算 y 对应的 x 位置下一行的数据,从最小的 y 值的位置开始插入,

-(CGSize)collectionViewContentSize{

其次要实现这个方法, 这个方法设置 collectionView当前的尺寸(SIZE), 如果不设置的话,瀑布流并不会滚动

<span style="font-size:18px;">-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;</span><span style="font-size:14px;">
</span>

这个方法会在滚动时刷新布局

做瀑布流, 需要使用 UICollectionView 及 自定义 UICollectionViewCell,UICollectionViewFlowLayout. 每个 cell 的尺寸都是在 Plist 中写好的, 数据源需要用的 Model.图片用的是 SDWebImage 第三方框架, label 数据来自 model.