目标效果

目标是一个很常见的瀑布流效果,能力有限,借助了大佬造的轮子来实现了

使用库实现

更详细的请参考官方文档
vue-waterfall2

这篇文章还有其他vue组件的介绍

(略过vue项目的构建)

1.安装vue-waterfall2

 yarn add vue-waterfall2@latest --save

或

 npm i vue-waterfall2@latest --save

2.在main.js中全局使用

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import waterfall from "vue-waterfall2";

Vue.use(waterfall);
Vue.use(ElementUI);

Vue.config.productionTip = false
new Vue({
    router,
    el: '#app',
    render: h => h(App)
});

不在main.js全局引入的话,而在某个页面import引入的话,会报render渲染错误,不知道为啥

3.创建组件

myWaterfall
注:@loadmore=“loadmore” @scroll="scroll"在官方文档中,用来加载更多和滚动事件的,但是我这个不是移动端,于是不需要了,col是支持多少列的意思
相关的样式布局可以在template自己改掉

<template>
  <div>
    <waterfall :col="col" :data="data">
      <!--  @loadmore="loadmore"
          @scroll="scroll" -->
      <template>
        <div class="cell-item" v-for="(item, index) in data" :key="index">
          <img :src="item.imgSrc" alt="加载错误" />
          <div class="item-body">
            <div class="item-desc">{{ item.title }}</div>
            <div class="item-footer">
              <div class="footer-left">
                <img :src="item.avatar" alt="" srcset="" />
                <div class="name">{{ item.user }}</div>
              </div>
              <div class="like">
                <img src="../../assets/images/icon/vote.png" alt="" />
                <div class="like-total">{{ item.vote_num }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      col: 5,
    };
  },
  methods: {},
};
</script>
<style lang="scss" 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);
      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);
      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;
  img {
    width: 100%;
    height: auto;
    display: block;
  }
}
</style>

3.在页面中引入组件

<template>
  <div class="container">
      <div class="waterfall">
        <my-waterfall :data="cardList"></my-waterfall>
      </div>
   </div>
</template>
<script>
import myWaterfall from "@/components/myWaterfall";
export default {
  components: { myWaterfall },
  data() {
    return {
      cardList: [
        {
          imgSrc: require("../../../mock/image/waterfall/01.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "Noice cancelling is a secret weapon",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/02.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "Work from home is so boring",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/05.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "Go out for the good sunset",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/03.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "Let’s run together",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/02.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "Work from home is so boring",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/04.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/06.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "New Sneaker has just arrived",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/08.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "Good smart charger ",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/07.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "Good smart charger ",
        },
        {
          imgSrc: require("../../../mock/image/waterfall/04.png"),
          avatar: require("../../assets/images/avator.png"),
          user: "Lewis",
          vote_num: 999,
          title: "",
        },
      ],
    };
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #f8f8f8;
  width: 100%;
}
</style>

使用的是模拟数据,所以会有点长

End