H5.小程序都适用的瀑布流做法

1、HTML代码：

<div style="display: flex; padding-top: 0.2rem">
   <!-- 左边 -->
  <div class="card-main-left">
      <shop-item
        v-for="(item, index) in leftList"
        :key="index"
        :item-info="item"
         @goMallDetails="goMallDetails"
        ></shop-item>
  </div>
   <!-- 右边 -->
  <div class="card-main-right">
      <shop-item
        v-for="(item, index) in rightList"
         :key="index"
         :item-info="item"
         @goMallDetails="goMallDetails"
       ></shop-item>
 </div>
</div>

2.TS：

export default class waterfallLayout extends Mixins(Mixin) {
  @Prop({
    type: Array,
  })
  public classifyList!: CommodityDto[]; //父子通信传入的数组
  leftList: CommodityDto[] = [];
  rightList: CommodityDto[] = [];
  leftHight = 0;
  rightHight = 0;

   /*
   * 监听数组变化
   */
  @Watch("classifyList", { immediate: true, deep: true })  
  updateClassify(): void {
    this.leftHight = 0;
    this.rightHight = 0;
    this.leftList = [];
    this.rightList = [];
    this.dealInfo(this.classifyList);
  }
  goMallDetails(itemInfo: CommodityDto): void {
    this.$emit("goMallDetails", itemInfo);
  }

   /*
   * 处理数据
   */
  dealInfo(allData: CommodityDto[]): void {
    //定义两个临时的变量来记录左右两栏的高度
    let leftH = this.leftHight;
    let rightH = this.rightHight;
    let leftData = [];
    let rightData = [];
    let imgHeight = 335; //图片高度是定死的，当然如果是变量可以设置为变量
    for (let i = 0; i < allData.length; i++) {
    //计算展示题目的高度
      let titleHeight = allData[i].commodityTitle
        ? Math.ceil(Number(allData[i].commodityTitle!.length - 1) / 10) * 36
        : 0;    
    //有特殊标签时的高度  
      let couponsLabelHight = allData[i].commodityLabel ? 28 : 0; 
    //当有价格，积分，印花等的高度
      let priceHeight = 0;
      let arr = allData[i].defaultPrice;
      if (arr) {
        let info = arr[0];
        if (info.amount! > 0 && info.integral! > 0 && info.printing! > 0) {
          priceHeight = 76;
        } else {
          priceHeight = 38;
        }
      }
       //每一个iyem展示出来的高
      let currentItemHeight =
        titleHeight + couponsLabelHight + imgHeight + priceHeight;
      if (leftH == rightH || leftH < rightH) {
        //判断左右两侧当前的累计高度，来确定item应该放置在左边还是右边
        leftData.push(allData[i]);
        leftH += currentItemHeight;
      } else {
        rightData.push(allData[i]);
        rightH += currentItemHeight;
      }
    }

    leftData = this.leftList.concat(leftData);
    rightData = this.rightList.concat(rightData);
    // console.log("rightData",rightData);
    //更新左右两栏的数据以及累计高度
    this.leftList = leftData;
    this.rightList = rightData;
    this.leftHight = leftH;
    this.rightHight = rightH;
  }
}

3.css: 宽设置为7.5rem

.card-main-left {
    width: 3.35rem;
    margin-right: 0.2rem;
  }

  .card-main-right {
    width: 3.35rem;
  }