从电影中联想
周末重温了电影《惊天魔盗团2》。其中有一个片段是主角控制下雨的魔术表演。
“别人告诉我，我是个控制狂。我发现控制别人真的非常难，所以我想控制一些比人容易得多的东西，比如说控制天气怎么样？让天上下雨那是老天爷干的事，我要干点儿老天爷干不了的事。”几句话已经让气氛完全上扬，接下来在他喊出“停”的一刻，原本一条条线的大雨忽然变成无数雨滴，悬浮停止在空中，场面极其壮观。
电影看完的我还在不停回味，魔术这条路是走不通了，那我能控制些什么呢？
当然是瀑布流了啊~（就是这么硬的转场O(∩_∩)O哈哈~）。
瀑布流布局是一种页面布局方式，其中每个列的宽度相同，但高度不同，形成一种参差不齐的多栏布局。传统的瀑布流布局都是页面内容增多来触发浏览器的滚动条来滚动展示的，但是单单是上下滚动可不能算是控制啊。
直接展示
原理：Canvas 绘制瀑布流矩阵
瀑布流每列相等，高度不同。排除高度的差异，瀑布流实际上就像一个排列整齐的方阵，就像一个矩阵，就像一个二维数组。
思路打开就好做了，只要在瀑布流动画时往数组里动态的插入行与列就可以了。通过矩阵可以在绘制 Canvas 动画时，很方便的计算到需要补缺的新的瀑布模块。
加上瀑布流的运动方向来判断：
- 向下流，只需在矩阵上方添加新的瀑布模块；
- 向上流，只需在矩阵下方添加新的瀑布模块；
- 向左流，只需在矩阵右方添加新的瀑布模块；
- 向右流，只需在矩阵左方添加新的瀑布模块；
有什么用呢
最后，如果兄弟们问我这玩意儿在什么场景下用？我也不知道，哈哈哈。或许兄弟们有好的想法？
因为使用Canvas绘制的，所有中间模块渲染没办法像vue做成插槽自定义内容，使用Canvas绘制只能定制了。
