微信小程序-瀑布流商品展示

最近在做一组微信小程序瀑布流展示商品的页面，正好记录一下备用。

 

商品列表根据图片高度依次展示，通过计算图片高度决定数据填充哪个列表，下面贴代码

WXML：

<!--商品列表展示-->

<view style="display:none" wx:if="{
  {isShow}}">
		<image wx:for="{
  {wxProductList}}" wx:key="id" id="{
  {item.wxProductId}}" src="{
  {item.wx_original}}" bindload="onImageLoad" ></image>
</view>
<scroll-view scroll-y="true" style="height:{
  {scrollH}}px;" wx:if="{
  {isShow}}">
		<view style="width:100%;" style="margin-bottom:10px">
		 
			<view class="img_item">
				<view wx:for="{
  {col1}}" wx:key="id" >
						<image src="{
  {item.wx_original}}" style="width:100%;height:{
  {item.height}}px" bindtap="goDetail" data-pid="{
  {item.wx_productId}}" data-addrid="{
  {wxMemberDefaultAddr.wx_agentAddressId}}"></image>
						<view class="w-name font-w-b font-13">{
  {item.wx_productName}}</view>
						<view class="w-name font-10">{
  {item.