@yacent
2016-08-04T17:20:43.000000Z
字数 595
阅读 1159
性能优化
做瀑布流的原因，是因为在做公司七夕活动页面当中，每一个活动页面的图片多，并且需要进行两列布局，同时还要实现轮流插入，即传统瀑布流。
瀑布流现在已经有很多地方在用了，特别是一些图片展示的网站，很早就开始使用瀑布流布局的方式。随着屏幕的滚动，到达底部触发加载小块数据，并且将数据块添加到当前尾部。
这种布局的过程，主要就是在当前元素排布的所有列上，取最短的那一列。那么，现在的问题就是，如果我们能实时或者动态地获取当前几列的高矮，那么我们不就能准确的将元素插入到当中了吗？现在问题就是，如何获取当前列的高度呢？可以将每一列的高度都存在一个数组当中，每次定位当前元素的时候，都实时修改当前定位的列高，那样每一次都能比较准确的获取到当前最矮的那一列。原理大概就是这样子。
在活动页面当中，我使用的 flex 来进行，由于考虑到是在移动端上进行，移动端的浏览器对flex的支持度尚为很好，基本主流的浏览器都支持flex，所以我也就使用flex来简便开发了。但是原来的局限性比较大，就是固定两列的，所以在这里的目标是想将瀑布流拓展得健壮性更好一点。
先上原本使用flex 来进行实现的瀑布流，只规定了两列，上代码