瀑布流优化设计

需求：

优化商品列表的瀑布流展示

1、商品：包含图片和文案、分页请求的、一行两列

2、图片：宽高不固定，懒加载

现状：

现有的方案是页面两个div，即两个管道，一个一个渲染商品项，判断两个管道哪一个高度小，就在小的管道最后插入一个商品。这种设计方案存在的问题是商品会插入到较高的管道上，原因是：图片是懒加载的，即图片的渲染是延时的，在取管道高度时，图片存在渲染未完成的情况，导致获取到的管道高度并不是真实的高度。

解决方案：

提前获取到图片的真实宽高，可以根据img元素节点获取到图片的真实宽高的“naturalWidth”、“naturalHeight”。有了真实的宽高，不论图片是否是懒加载，是否延时，都不影响我们计算比较管道的高度。