pc端瀑布流，移动端

<template>
  <div class="container-water-fall">
    <waterfall
      :col="col"
      :width="itemWidth"
      :gutterWidth="gutterWidth"
      :data="data"
      @loadmore="loadmore"
      @scroll="scroll"
    >
      <template>
        <div class="cell-item" v-for="(item, index) in data" :key="index">
          <img :src="item.image" alt="加载错误" />
          <div class="item-body">
            <div class="item-footer">
              <div class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></div>
              <div class="name">{{ item.user }}</div>
              <div class="like" :class="item.liked ? 'active' : ''">
                <i></i>
                <div class="like-total">{{ item.liked }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data: [
        {
          image: "https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/201637/20/15313/183095/618cf93aEc5cb7a43/5d55182ae429dff7.jpg.webp",
          imgH: 122,
          title: " 标题只有1行哦长砍",
          desc: "Bon Cake(徐家汇店)这家店不要条好吃啊",
          praiseNum: 322,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image:
            "https://img11.360buyimg.com/seckillcms/s500x500_jfs/t1/118597/5/21106/97967/618cdd1aEe2b5056f/376f4aa998c171ff.jpg",
          imgH: 225,
          title: "标题只有1行哦长砍",
          desc: "Bon Cake(徐家汇店)这家店",
          praiseNum: 32,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image:
            "https://img10.360buyimg.com/seckillcms/s500x500_jfs/t1/206994/1/2784/51117/615457eaE79f506a8/8e15eff77d39c6bc.jpg",
          imgH: 89,
          title: "标题只有1行哦长砍",
          desc:
            "Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店",
          praiseNum: 32,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image:
            "https://img13.360buyimg.com/seckillcms/s500x500_jfs/t1/203880/7/14964/72570/618d1f35E30414b69/542ce113c893c06b.jpg",
          imgH: 112,
          title: "标题只有1行哦长砍",
          desc: "Bon Cake(徐家汇店)这家店",
          praiseNum: 32,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image:
            "https://img14.360buyimg.com/seckillcms/s280x280_jfs/t1/145896/33/23249/99746/618c8c08E138c2571/678b98824e83064f.jpg.webp",
          imgH: 112,
          title: "标题只有1行哦长砍",
          desc: "Bon Cake(徐家汇店)这家店",
          praiseNum: 32,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image: "https://img11.360buyimg.com/seckillcms/s280x280_jfs/t1/201637/20/15313/183095/618cf93aEc5cb7a43/5d55182ae429dff7.jpg.webp",
          imgH: 122,
          title: " 标题只有1行哦长砍",
          desc: "Bon Cake(徐家汇店)这家店不要条好吃啊",
          praiseNum: 322,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image:
            "https://img11.360buyimg.com/seckillcms/s500x500_jfs/t1/118597/5/21106/97967/618cdd1aEe2b5056f/376f4aa998c171ff.jpg",
          imgH: 225,
          title: "标题只有1行哦长砍",
          desc: "Bon Cake(徐家汇店)这家店",
          praiseNum: 32,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image:
            "https://img10.360buyimg.com/seckillcms/s500x500_jfs/t1/206994/1/2784/51117/615457eaE79f506a8/8e15eff77d39c6bc.jpg",
          imgH: 89,
          title: "标题只有1行哦长砍",
          desc:
            "Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店Bon Cake(徐家汇店)这家店",
          praiseNum: 32,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image:
            "https://img13.360buyimg.com/seckillcms/s500x500_jfs/t1/203880/7/14964/72570/618d1f35E30414b69/542ce113c893c06b.jpg",
          imgH: 112,
          title: "标题只有1行哦长砍",
          desc: "Bon Cake(徐家汇店)这家店",
          praiseNum: 32,
          top: 0,
          left: 0,
          itemH: 0,
        },
        {
          image:
            "https://img14.360buyimg.com/seckillcms/s280x280_jfs/t1/145896/33/23249/99746/618c8c08E138c2571/678b98824e83064f.jpg.webp",
          imgH: 112,
          title: "标题只有1行哦长砍",
          desc: "Bon Cake(徐家汇店)这家店",
          praiseNum: 32,
          top: 0,
          left: 0,
          itemH: 0,
        },
      ],
      col: 5,
    };
  },
  computed: {
    // itemWidth() {
    //   return 138 * 0.5 * (document.documentElement.clientWidth / 375); //#rem布局 计算宽度
    // },
    // gutterWidth() {
    //   return 9 * 0.5 * (document.documentElement.clientWidth / 375); //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    // },
  },
  mounted() {},
  methods: {
    // scroll(scrollData) {
    //   console.log(scrollData);
    // },
    // switchCol(col) {
    //   this.col = col;
    //   console.log(this.col);
    // },
    // loadmore(index) {
    //   this.data = this.data.concat(this.data);
    // },
  },
};
</script>
<style scoped>
item-body {
  margin: 9px;
}
.item-desc {
  text-align: left;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  color: #000000;
}
.item-footer {
  display: flex;
  justify-content: space-between;
}
.footer-left {
  display: flex;
  align-items: center;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.6);
}
.footer-left > img {
  border-radius: 50%;
  width: 22px;
  height: 22px;
  margin-right: 4px;
}
.like {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: SF Pro Display;
  font-style: normal;
  font-weight: normal;
  font-size: 12px;
  line-height: 14px;
  color: rgba(0, 0, 0, 0.4);
}
.like > img {
  margin-right: 4px;
}
.cell-item {
  width: 100%;
  margin-bottom: 6px;
  background: #ffffff;
  border: 2px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  box-sizing: border-box;
}
.cell-item > img {
  width: 100%;
  height: auto;
  display: block;
}
</style>