bnyer-cloud-tiktok/components/waterfall-list/waterfall-list.vue

<template>
  <!-- 瀑布流布局列表 -->
  <view class="waterfall-list_M" :style="{marginLeft: margin + 'px', marginRight: margin + 'px'}">
    <view
        class="waterfall-col"
        v-for="(colItem, index) in cols"
    >
      <view
          class="waterfall-col-item"
          v-for="item in colItem.dataList"
          :key="item.id"
          :style="{
            width: item.width + 'px',
            height: item.height + 'px',
            marginBottom: interval + 'px'
          }"
      >
        <image lazy-load class="waterfall-img"
               :src="item.imgUrl"
               @click="clickItem(item)"
               mode="aspectFill"></image>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  name: "waterfall-list",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  //混合封装的属性和方法
  mixins: [],
  //组件传入的属性
  props: {
    col: {
      type: Number,
      default: 3,
    },
    margin: {
      type: Number,
      default: 20,
    },
    interval: {
      type: Number,
      default: 10
    },
    clickItem: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    //这里存放数据
    return {
      pageWidth: 750,
      colWidth: 210,
      cols: [
        {
          height: 0,
          dataList: []
        }
      ]
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    init() {
      let that = this;
      that.col = that.col ? that.col : 3;
      //初始化列
      if (that.col > 0) {
        let cols = []
        for (let i = 0; i < that.col; i++) {
          cols.push({
            height: 0,
            dataList: []
          })
        }
        that.cols = cols;
      }
      //计算列宽度
      that.colWidth = (that.pageWidth - that.margin * 2 - that.interval * (that.col - 1)) / that.col;
    },
    getAddCurrentIndex(data) {
      if (data && data.length > 0) {
        let min = data[0].height;
        let index = 0;
        for (let i = 0; i < data.length; i++) {
          if (data[i].height < min){
            min = data[i].height;
            index = i;
          }
        }
        return index;
      }
      return undefined;
    },
    calcHeightWidth(item) {
      let that = this;
      item.width = that.colWidth;
      switch (item.typeId) {
        case 1:
          item.height = item.width * 1;
          break;
        case 2:
          item.height = item.width * 1;
          break;
        case 3:
          item.height = item.width + (item.width * 0.7);
          break;
        case 4:
          item.height = item.width - (item.width * 0.2);
          break;
        case 5:
          item.height = item.width - (item.width * 0.2);
          break;
        case 6:
          item.height = item.width * 1;
          break;
        default:
          item.height = item.width * 1;
      }
      return item
    },
    addData(data) {
      let that = this;
      for (let i = 0; i < data.length; i++) {
        that.calcHeightWidth(data[i]);
        let index = that.getAddCurrentIndex(that.cols);
        that.cols[index].height += data[i].height;
        that.cols[index].dataList.push(data[i]);
      }
    }
  },
  created() {
    let that = this;
    uni.getSystemInfo({
      success: function (res) {
        that.pageWidth = res.screenWidth;
        that.init();
      }
    })
  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {

  }, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="scss" scoped>
.waterfall-list_M {
  display: flex;
  justify-content: space-between;

  .waterfall-col {

    .waterfall-col-item {
      background: $uni-bg-base-color;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.25);

      .waterfall-img {
        width: 100%;
        height: 100%;

      }

    }

  }

}
</style>