1.瀑布流

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

QQ20150916-4.png

2.瀑布流中需要注意的点

1. cell的添加顺序：瀑布流布局中，每一行的cell摆放的位置并不是按顺序摆放，而是优先添加在上一行中高度最短的列中。如果不是按照最短高度所在的列优先添加，就会导致列遇列之间高度相差越来越大，接下来我们用图片来总结理解为什么要这样做。

QQ20150916-2.png

QQ20150916-3.png

选择了按最短列优先添加需要我们做的是，在每次添加后，需要找到总列数中，高度最短的一列，需要我们写一个比较列数高度最小的比较算法，用一个数组装入不同列的高度，选出高度最短的列号作为下次添加的列号。

1. cell的创建规则：在瀑布流中，由于数据比较多，不能一次性创建所有的cell，这样会造成内存的浪费。我们可以发现，当cell出现在屏幕上（肉眼可以观察到的位置）时，我们才有必要把这个cell显示出来，就如UITableViewCell一样，需要的时候才创建，不需要的时候放在缓存池里，创建cell的时候优先在缓存池中查找有无可循环利用的cell。

   总结：在创建cell的时候，我们的规则是，优先从缓存池中寻找可循环利用的cell，有的话直接使用cell，没有可循环利用的话再创建。

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier{ __block RFWaterFallViewCell *reusableCell = nil;   [self.reusableCells enumerateObjectsUsingBlock:^(RFWaterFallViewCell *cell, BOOL *stop) {      if ([cell.identifier isEqualToString:identifier]) {          reusableCell = cell;          *stop = YES;      } }];   if (reusableCell) { // 从缓存池中移除      [self.reusableCells removeObject:reusableCell]; } return reusableCell; }

3.结构设计

要显示一个瀑布流布局，首先我们要有数据，于是我们可以创建数据源的protocol，我们需要知道每个cell的高度和点击cell的事件处理等，我们可以创建瀑布流控件的代理delegate用来监听控制器点击事件。怎么样，是不是感觉这个结构很熟悉呢，这不就是我们天天在用的UITableView本来的结构吗？

我们先来看一下UITableView是怎么展示数据的：

1. 调用数据源的下面方法得知一共有多少组数据

1. 调用数据源的下面方法得知每一组有多少行数据

1. 调用数据源的下面方法得知每一行显示什么内容

好了，这样的结构我们再熟悉不过了，我们接着来模范UITableView来创建属于我们自己的瀑布流控制器

QQ20150915-1.png

1. 首先我们需要知道我们数据源中需要显示多少个cell、每个index索引显示对应的是哪个cell、每一行需要显示多少列。
   

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   #pragma mark - RFWaterFallDataSource 数据源方法 @protocol RFWaterFallDataSource   @required /** 显示多少个cell */ - (NSUInteger)numberOfCellInWaterFallView:(RFWaterFallView *)waterFallView;   /** 显示每个index对应的cell */ - (RFWaterFallViewCell *)waterFallView:(RFWaterFallView *)waterFallView cellForRowAtIndexPath:ayon-h"> (RFWaterFallViewCell *)waterFallView:(RFWaterFallView *)waterFallView cellForRowAtIndexPath:QQ20150916-4.png 2.瀑布流中需要注意的点 cell的添加顺序：瀑布流布局中，每一行的cell摆放的位置并不是按顺序摆放，而是优先添加在上一行中高度最短的列中。如果不是按照最短高度所在的列优先添加，就会导致列遇列之间高度相差越来越大，接下来我们用图片来总结理解为什么要这样做。 QQ20150916-2.png QQ20150916-3.png 选择了按最短列优先添加需要我们做的是，在每次添加后，需要找到总列数中，高度最短的一列，需要我们写一个比较列数高度最小的比较算法，用一个数组装入不同列的高度，选出高度最短的列号作为下次添加的列号。 1 2 3 4 5 6 7 8 9 10 // cell 处在最短的一列     NSUInteger cellColumn = 0;     // cell 所处那列的最大Y值（最短那一列的最大Y值）     CGFloat maxYOfCellColum = maxYOfColums[cellColumn];     for (int j = 1; j < numberOfColumns; j++) {         if (maxYOfColums[j] < maxYOfCellColum) {             cellColumn = j;             maxYOfCellColum = maxYOfColums[j];         }     } cell的创建规则：在瀑布流中，由于数据比较多，不能一次性创建所有的cell，这样会造成内存的浪费。我们可以发现，当cell出现在屏幕上（肉眼可以观察到的位置）时，我们才有必要把这个cell显示出来，就如UITableViewCell一样，需要的时候才创建，不需要的时候放在缓存池里，创建cell的时候优先在缓存池中查找有无可循环利用的cell。 总结：在创建cell的时候，我们的规则是，优先从缓存池中寻找可循环利用的cell，有的话直接使用cell，没有可循环利用的话再创建。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier{ __block RFWaterFallViewCell *reusableCell = nil;   [self.reusableCells enumerateObjectsUsingBlock:^(RFWaterFallViewCell *cell, BOOL *stop) {      if ([cell.identifier isEqualToString:identifier]) {          reusableCell = cell;          *stop = YES;      } }];   if (reusableCell) { // 从缓存池中移除      [self.reusableCells removeObject:reusableCell]; } return reusableCell; } 3.结构设计 要显示一个瀑布流布局，首先我们要有数据，于是我们可以创建数据源的protocol，我们需要知道每个cell的高度和点击cell的事件处理等，我们可以创建瀑布流控件的代理delegate用来监听控制器点击事件。怎么样，是不是感觉这个结构很熟悉呢，这不就是我们天天在用的UITableView本来的结构吗？ 我们先来看一下UITableView是怎么展示数据的： 调用数据源的下面方法得知一共有多少组数据 1 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView; 调用数据源的下面方法得知每一组有多少行数据 1 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section; 调用数据源的下面方法得知每一行显示什么内容 1 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath; 好了，这样的结构我们再熟悉不过了，我们接着来模范UITableView来创建属于我们自己的瀑布流控制器 QQ20150915-1.png 首先我们需要知道我们数据源中需要显示多少个cell、每个index索引显示对应的是哪个cell、每一行需要显示多少列。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #pragma mark - RFWaterFallDataSource 数据源方法 @protocol RFWaterFallDataSource   @required /** 显示多少个cell */ - (NSUInteger)numberOfCellInWaterFallView:(RFWaterFallView *