小程序和H5瀑布流的实现

瀑布流：左右两列高度不一样的数据。像瀑布一样往下排列。

瀑布流和普通列表还是有点不一样，会碰到三点问题：

1、怎么处理页面图片闪烁的问题。

      加载页面的时候，刚看到文字在这个文字，然后有被挤下去了，图片刚没有，加载完有显示出来了。

2、怎么平衡左右两列的高度差的问题。

      左右两列是渲染数据，但是可能左边刚好很多都是图片比较高的数据，右边都是矮的图片，那么滚动翻页的时候，会出现右边一大片的空白。

3、不断的翻页，小程序会越来越卡的问题。

      用户不段上拉翻页，页面越来越卡，知道crash。

解决以上三个问题，就能开发一个比较好的瀑布流的场景列表了。

解决方案：

1、图片之所以会闪烁，是因为我们不知道图片的高度，导致渲染图片的时候，默认图的高度和实际不一致，导致加载的时候页面文字图片会上下闪烁。 知道问题，处理就简单了，那就固定高度，需要后台返回的数据包含图片的宽高比。一般数据入库的时候存储或者获取图片宽高比更合适。

2、每一条数据的高低我们不能改变，那么我们就来改变左右的数量。在渲染数据之前，我们先看下左右两边的高度，然后决定本次渲染左右的数量，比如左边现在高度是900，右边高度是1100，那么我们就给左右多一条数据。比如一页5条，那么久左边放3条，右边放2条。左右两边高度，我们再渲染完之后，异步去获取一下左右两边的高度存起来。

3、由于小程序内存的原因，如果不停的翻页，左右两边数据越来越多，非常容易crash，所以我们需要在渲染几页数据之后，删除一部分数据，把顶部的数据删除，保持当前页面拥有的节点总是在一个范围内，不会随着滚动而增加。

 

页面结构布局：float:left ,  float:righ