<div class="image-package"><img src="http:https://img.haomeiwen.com/i3507889/32ea249aba0fa7be.gif?imageMogr2/auto-orient/strip">
<div class="image-caption"></div></div><p>
</p><p>本文实现的是流水布局的效果，如上图所示。
瀑布流的实现分析
瀑布流的实现分析
</p><p>瀑布流的实现方式大致有三种方式:</p><p>第一种，利用多个tableVIew来实现，但是这种方法太笨太low，一般不建议采用。</p><p>第二种，利用scrollView，在scrollView上加几张view，给这几张view绑定几个标识符，然后加入到一个缓存池中(就是一个数组，里面存放view)。这样实现会很麻烦，首先，我需要判断当前正在显示的视图，其次，我还需要计算当前正在显示的视图的位置。如果不觉得麻烦的话完全可以去自己实现实现。在这里，我没有采用这种方式。</p><p>第三种，也是最常用的，就是利用collectionView来实现。因为collectionView里面已经帮我们处理了重用标识符以及缓存池的利用。我们只需要手动算一下每个item的frame就可以了。本文才用的正是这种做法。</p><p>为了实现这种效果，我需要自定义flowLayout，然后实现这个类中的几个方法。我在下面的代码中有解释，这里不多说。</p><p>其实，瀑布流的原理就是我找到每列最短的一个item然后在最短的下面加上一个新的item就好了。为了找出最短的那一列，我需要记录一下每一列的高度，在这里我用了一个字典去记录，当然了也可以用数组记录。</p><p>下面还是先看代码，然后再解释。</p><div class="image-package"><img src="http:https://img.haomeiwen.com/i3507889/5c59df3436625aae.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240">
<div class="image-caption">瀑布流的实现分析</div></div><div class="image-package"><img src="http:https://img.haomeiwen.com/i3507889/f41f0d17fd0b7f2d.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240">
<div class="image-caption">瀑布流的实现分析</div></div><div class="image-package"><img src="http:https://img.haomeiwen.com/i3507889/24bc6f64007d2938.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240">
<div class="image-caption">瀑布流的实现分析</div></div><div class="image-package"><img src="http:https://img.haomeiwen.com/i3507889/a90be24347702412.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240">
<div class="image-caption">瀑布流的实现分析</div></div><div class="image-package"><img src="http:https://img.haomeiwen.com/i3507889/52af7dd90ccebb9c.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240">
<div class="image-caption">瀑布流的实现分析</div></div><div class="image-package"><img src="http:https://img.haomeiwen.com/i3507889/8fa131e1934e6f71.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240">
<div class="image-caption">瀑布流的实现分析</div></div><p>在自定义的flowLayout中定义了总列数。然后在prepareLayou方法中先给记录每一列高度的字典赋一个初始值。用一个数组来存放所有的item的属性。然后在</p>layoutAtteibutesForItemAtIndexPath中去计算并布局。其实布局的代码很简单，每次在加载一个新的item的时候都回走这个布局的方法因此我只需要找到最短的那一列并加进去就可以了。item的宽和高都不用去管，只需要计算x和y 就可以。我的代码方法里面有计算公式。仅供参考。然后根据最大列的行数的高度来调整整个collectionView的contentSize就OK了。
以上是自己的实现思路，仅供参考。如有不足之处，请多多改正。下面是github
地址，如有兴趣可前往下载
网友评论