uni-app項目瀑布流佈局,完美解決方案

預覽圖

使用教程

直接複製代碼 <hd-list/> 列表佈局數據本身寫

<template>
  <view class="waterfall-wrap">
    <view class="waterfall-list">
      <view class="left">
        <hd-list
          :listData="item"
          v-for="(item,index) in goodsLeftList"
          :key="index"
          @onImageLoad="onImageLoad"
        ></hd-list>
      </view>
      <view class="right">
        <hd-list
          :listData="item"
          v-for="(item,index) in goodsRightList"
          :key="index"
          @onImageLoad="onImageLoad"
        ></hd-list>
      </view>
    </view>
  </view>
</template>

<script>
import hdList from "../component/hd-list.vue";
export default {
  name: "waterfall",
  props: {
    listData: {
      type: Array,
      default: []
    }
  },
  components: {
    hdList
  },
  watch: {
    /**
     * 監聽listData數據
     */
    listData: {
      handler: function(data) {
        data.length > 0 && this.waterfallImage();
      },
      immediate: true
    }
  },
  data() {
    return {
      goodsListCount: 0, //加載第i張圖片
      // 左側商品列表
      goodsLeftList: [],
      goodsLeftListHeight: 0,
      // 右側商品列表
      goodsRightList: [],
      goodsRightListHeight: 0
    };
  },
  methods: {
    // 圖片綁定事件，經過比較左右列表高度，實現瀑布流展現
    onImageLoad: function(e) {
      let divWidth = 342; //顯示的單欄寬度，我設爲342rpx
      let oImgW = e.detail.width; //圖片原始寬度
      let oImgH = e.detail.height; //圖片原始高度
      let rImgH = (divWidth * oImgH) / oImgW + 32; //根據寬高比計算當前載入的圖片的高度
      if (this.goodsListCount == 0) {
        this.goodsLeftListHeight += rImgH; //第一張圖片高度加到goodsLeftListHeight
        this.goodsListCount++; //圖片索引加1
        this.goodsRightList.push(this.listData[this.goodsListCount]); //添加第二張圖片到goodsRightList數組，由於第一張已經初始化到左側列表中
      } else {
        this.goodsListCount++; //圖片索引加1
        if (this.goodsLeftListHeight > this.goodsRightListHeight) {
          //把圖片的高度加到目前高度更低的欄中
          this.goodsRightListHeight += rImgH; //第二張圖片高度加到goodsRightListHeight
        } else {
          this.goodsLeftListHeight += rImgH;
        }

        if (this.goodsListCount < this.listData.length) {
          //根據目前的欄高，把下一張圖片，push到低的那欄
          if (this.goodsLeftListHeight > this.goodsRightListHeight) {
            this.goodsRightList.push(this.listData[this.goodsListCount]);
          } else {
            this.goodsLeftList.push(this.listData[this.goodsListCount]);
          }
        }
      }
    },
    // 向商品列表添加第一張圖片
    async waterfallImage() {
      this.goodsListCount = 0;
      this.goodsLeftList.push(this.listData[0]);
    }
  }
};
</script>

兼容性

uni-app項目中使用都兼容

歡迎關注
歡迎關注小程序「進階的大前端」，800多道前端面試題在線查看