瀑布流·UITableView实现

瀑布流可以用UITableView、UIScrollView、UICollectionView三种方法实现。

本文利用UITableView并使用MRC模式实现瀑布流。

效果图：

效果图

一、定义宏、全局变量、dealloc全局变量。

在ViewController.m中：

图1

实现存储图片的数组的懒加载。其中，使用_imageArr和self.imageArr均可。但是注意区别在于，使用_imageArr时，对其赋值时需要给它权限，即要alloc或retain。而使用self.imageArr时，因为是调用的imageArr的set方法，方法里有系统自带的retain，故不需要在此再alloc或retain。

ps：在MRC模式下，重写set方法的时候，也要retain。例如：-(void)setImage:(UIImage *)image { _image = [image retain]; } 

i+1的原因是，图片是从huoying1开始的，依次是 huoying2、huoying3... 没有huoying0。宏IMAGE_COUNT是17，即共有17张图片。

图2

二、在viewDidLoad中，实现左UITableView 和 右UITableView

把竖向和横向的滚动条都去掉，不去掉横向的也可，但是渣渣怕会因为UITableView设置的尺寸问题，会导致横向有滑动...

图3

三、实现UITableView的代理方法

使用“section”而非“cell”是因为这样使得每个cell上方有个头，以使图片与图片之间的排列不至于太过紧密。每个section下有一个cell。

因为有17张图片，加载图片的规则是这样的：

左：0、2、4、6、8、10、12、14、16            共9张。

右：1、3、5、7、9、11、13、15、                共8张。

第一个代理方法：如果是左UITableView，那么count=17%2=1，所以返回17/2=8+count，即8+1=9张图片。如果是右UITableView就返回17/2=8张图片。

第二个代理方法：每个section下返回1个cell。

第三个代理方法：利用xib。其中xib的引入代码在图3中。如果是左UITableView，则将图片数组的第0、2、4、6、8、10、12、14、16的元素（即图片）赋值给image。 如果是右UITableView，则将图片数组的第1、3、5、7、9、11、13、15的元素（即图片）赋值给image。

图4

第四个代理方法：设置cell的高度。如果是左UITableView，取出图片数组的第0、2、4、6、8、10、12、14、16的元素（即图片），对每张图片调用自己写的imageHeight方法，设置图片的新高度，以使其不失真的显示在界面上。

因为，图原高/图原宽 = 图新高/图新宽。其中图新宽就是整个界面宽度的一半。

所以，根据交叉相乘，图新高= 图新宽x图原高/图原宽，也即图新高=图新宽/(图原宽/图原高)。

图5

第五个代理方法：让section中的第一个cell进行复用。当然每个section中也就一个cell（图里的注释不对）。

第六个代理方法：当是第一个section时，设置其高度为0，这样左右两边的UITableVIew的第一张图片就不会有个空白的“头部”那么难看了。

图6

四、设置偏移量

如果滑动的是左UITableView，则右UITableView的偏移量与滑动的偏移量相同；反之亦然。

图7

拖Xib的步骤就省略了。