作者：by Vergil

图片类的应用我们常常会看到所谓的“瀑布流排版”，各种不同大小的图片拼接摆放在画面上，而也有人直接称这种排版为Pinterest排版，

可能是因为Pinterest是早期经典的RWD设计网站之一。而正式一点的说法应该是Masonry Layout，Dynamic Grid Layout。

比如这张Pinterest官网的图：

排版的逻辑

• 第一排橘色的部分，直接从左至右放下图片。

• 接下来不断的将新的图片，安插在最短的column上，从而实现瀑布流的排版方式，可以参考上面放置图片的数字顺序。

自定Layout

我们打算通过UICollectionViewFlowLayout来实现这个布局，

prepare()是它的入口，在这里可以做一些初始化的设定，比如基本的边界、cell之间的距离等等。

因为demo中是提供了切换布局的功能，而我们希望布局在计算过后不用再重新计算，所以会先判断是否已经算过。

如果没有计算过则执行我们的computeAndStoreAttributesWithItemWidth方法来计算布局信息。

排版的本质是去计算每一个cell在scrollView中的位置。

下面是计算每一个Cell的Attribute方法，其中包含了计算后存起来的动作，计算后将结果存起来。

下面是系统读取attributes的方法，因为layoutAttributes中只有每一个cell的frame资讯，

所以要记得同时修改itemSize，否则因为itemSize的错误而导致UICollectionView的contentSize是错的。

Demo中其他的效果

UICollectionView切换的动画的方法，要记得先执行collectionViewLayout.invalidateLayout，然后再换成新的布局。