花几个小时做了一个瀑布流布局用来盛放各种链接

[mask2012]

最终的样子

http://mask2012.github.io/collectionBlock/index3.html

第一版

最初是想做成一个版块一个版块地往下罗列

后来觉得这样也不是很好看拉~

第二版

做第二版是想起来有一种三角形底部的背景很酷，灵感来自这里

这个很酷的效果就是光影跟随鼠标，但缺点也同样是由它带来的，这个canvas层必须居于顶端才能捕捉鼠标事件，如果被盖住就嗝屁了。 尝试了在内容层写pointer-event:none，这样事件就可以透到底层了 可是内容层就不能点击和滑动了，倒是可以给a加上pointer-event:auto 可是依然没法解决滑动的问题。 放弃。

第三版

也就是现在的版本 我是从这个瀑布流布局找到灵感的， 然后在这个配色网站选一种喜欢的配色体系。 配色不能太单调，用这种2n+1，3n+1的方法带来一种随机感

实际上纯粹利用flex做瀑布流是不符合要求的，见这篇文章的2种思路 瀑布流布局Flex 第一种是需要手工根据内容高度设定高度，还要根据浏览器宽度不同设不同的高度，另外，这种纯flex的布局最大的问题是每个cell是从上往下排列的，完了再去排第二列。这肯定是不能满足需求的 第二种是手工写多列，这个更不能符合要求

这时才发现第一个瀑布流的脚本计算挺强大的，实现了3个特性

1. 设定每个cell的最小宽度
2. 通过重新给定每个cell的order，实现了横向排列
3. 动态设定root层的高度，实现瀑布流效果

然后给每个cell编上序号，后续可以再加点装饰啥的，简直完美！