前提：

1.小程序使用wepy@1.70框架
2.自定義(商圈)瀑布流

<template lang="wxml">
  <view class="tradingAreaFlow">
    <view class="trading_column" style="height:{{lastboxheight}}px;"  wx:if="{{sqData.length > 0}}">
      <repeat for="{{sqData}}" key="index" index="index" item="item">
        <!-- 卡片Item -->
        <tradeFlowCard :item.sync="item" :isLogin.sync="isLogin"></tradeFlowCard>
      </repeat>
    </view>
  </view>
</template>

<script>
import wepy from 'wepy'
import tradeFlowCard from '@/components/tradeFlowCard'

export default class tradingAreaFlow extends wepy.component {
  components = {
    tradeFlowCard
  }
  props = {
    isLogin: Boolean,
    curTab: {
      type: Number,
      default: 0,
      twoWay: true
    },
    tabsIndex: {
      type: Number,
      default: 0,
      twoWay: true
    },
    tabCur: {
      type: Number,
      default: 0,
      twoWay: true
    },
    tradingList: {
      type: Array,
      default: [],
      twoWay: true
    },
    filterParam: Object
  }
  data = {
    list: [],
    sqData: [],
    imgLoadList: [],
    lastboxheight: 0
  }
  watch = {
    tradingList(newVal) {
      if (this.tabCur === 0) {
        this.imgLocation(newVal)
      }
    }
  }
  thumbsNum(text) {
    return this.strlen(text) > 20 ? 2 : 1
  }
  // 中英文混合字符串長度，英文字符加1，漢字加2
  strlen(str) {
    var len = 0
    for (var i = 0; i < str.length; i++) {
      var c = str.charCodeAt(i)
      // 單字節(jié)加1
      if ((c >= 0x0001 && c <= 0x007e) || (c >= 0xff60 && c <= 0xff9f)) {
        len++
      } else {
        // 漢字加2
        len += 2
      }
    }
    return len
  }
  // 圖片定位
  imgLocation(list) {
    // 求出每個盒子的寬度（包括內(nèi)邊距）
    let w = Math.floor((wepy.getSystemInfoSync().windowWidth - 30 - 10) / 2)
    // 求出當前窗口所能承載的瀑布流列數(shù)
    let cols = Math.floor(wepy.getSystemInfoSync().windowWidth / w)
    let hArr = [] // 保存每一列的高度

    this.sqData = list.map((item, index) => {
      let h = item.imgUrl ? (this.thumbsNum(item.content) === 2 ? 293 : 269) : (this.thumbsNum(item.content) === 2 ? 125 : 101)
      if (index < cols) {
        hArr[index] = h + 10
        if (index) { // 第二個
          item.top = 0
          item.left = w + 10
        } else { // 第一個
          item.top = 0
          item.left = 0
        }
      } else {
        // 最小高度的列
        let minH = Math.min.apply(null, hArr)
        // 最小高度的列在數(shù)組中的索引
        let minHIndex = hArr.indexOf(minH)

        item.top = minH
        item.left = (minHIndex * w) + (minHIndex * 10)
        // console.log(hArr, minH, item.left, index)
        hArr[minHIndex] += h + 10
      }
      this.lastboxheight = Math.max.apply(null, hArr)
      return item
    })
    this.$apply()
  }
}
</script>

<style lang=scss>
@import "../common/style/var.scss";
.trading_column {
  position: relative;
  margin: 0 30rpx;
  // column-count: 2;
  // column-gap:30rpx;
}
.nodata {
  font-size: 28rpx;
  color: $color-ll;
  line-height: 1;
  padding: 44rpx 0;
  text-align: center;
}
.nonext {
  font-size: 28rpx;
  padding: 44rpx 0;
  color: $color-ll;
  border-color: transparent;
  background: transparent;
  text-align: center;
}
.loading {
  width: 36rpx;
  height: 36rpx;
  margin: 0 auto;
  image {
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>