需求:
优化商品列表的瀑布流展示
1、商品:包含图片和文案、分页请求的、一行两列
2、图片:宽高不固定,懒加载
现状:
现有的方案是页面两个div,即两个管道,一个一个渲染商品项,判断两个管道哪一个高度小,就在小的管道最后插入一个商品。这种设计方案存在的问题是商品会插入到较高的管道上,原因是:图片是懒加载的,即图片的渲染是延时的,在取管道高度时,图片存在渲染未完成的情况,导致获取到的管道高度并不是真实的高度。
解决方案:
提前获取到图片的真实宽高,可以根据img元素节点获取到图片的真实宽高的“naturalWidth”、“naturalHeight”。有了真实的宽高,不论图片是否是懒加载,是否延时,都不影响我们计算比较管道的高度。