现在小程序商城越来越多，通常的商城中，商品展示都是那种常规的两列规则展示，但是现在越来越多的应用开始采用瀑布流的方式来展示商品，商品的图片高度不定，商品根据图片容器大小，自由排列，依次下排。
今儿，小圣贤君就为大家讲解一下，如何在小程序中实现瀑布流形式展示商品。
一般页面中商品会显示两列，通过接口拿到数据后，判断现有的两列的长短，将商品加入到列高较短的那一列中，如何判断两列的高低呢？
其实很简单，直接根据图片的高度来判断就可以。
假设有所有的数据都放在activitys这个数组中，那么activitys1代表存放第一列的数组，activitys2边存放第二列的数组。
在页面中创建一个隐藏的view，循环出所有的图片，类似下面的代码
view style='display: none;' image wx:for="{{activitys}}" wx:key="id" id="{{item.id}}" src="{{item.imageUrl}}" bindload="onImageLoad"/image /view这里绑定了一个bindload方法，在该方法中，可以拿到每个图片在页面中显示的高度。
onImageLoad方法如下：
/** * 图片加载函数 * 图片加载完成后，根据图片的高度，依次往第一列和第二列中推入数据 */ onImageLoad: function(options) { console.log(options) let currentId = options.currentTarget.id; let imageWidth = options.detail.width; // 图片宽度 let imageHeight = options.detail.height; // 图片高度 let activitys = this.data.activitys; // 获取所有的数据资源 let activityObj = null; for (let i = 0; i activitys.length; i++) { if (activitys[i].id === currentId) { activityObj = activitys[i]; break; } } let imagesCount = this.data.imagesCount - 1; let activitys1 = this.data.activitys1; let activitys2 = this.data.activitys2; if (colOneHeight = colTwoHeight) { colOneHeight += imageHeight; activitys1.push(activityObj) } else { colTwoHeight += imageHeight; activitys2.push(activityObj); } let data = { imagesCount: imagesCount, activitys1: activitys1, activitys2: activitys2 } if (!imagesCount) { data.activitys = []; } this.setData(data); },其中colOneHeight 和colTwoHeight是两个全局变量，分别记录两列的高度。
因为在页面中，两列的宽度是相等的，图片的宽度也都是相等的，高度自适应，所以，计算图片的高度就可以判断两列的高度。
思路：
1.当没有数据的时候，直接在第一列加入商品。
2.判断两列已有的数据，在高度较小的那一列加入商品数据，同时更新该列的全局高度数据，方便后面的判断。
效果图：
有问题可以留言联系博主，欢迎关注博主——小圣贤君。
