vue使用vue-waterfall2实现瀑布流布局

安装

npm i vue-waterfall2@latest --save

引入
在main.js引入

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)

使用例子

<template>
  <div class="container-water-fall">
    <!-- <h1 style="position: fixed;left: 0;top: 100px;font-style: 15px;color:blue;z-index: 1000;">{{loadstatus}}</h1> -->
    <div class="btn-group">
      <button style="width: 250px" class="blue-light">
        <router-link to="/">To Common Demo (前往普通Demo)</router-link>
      </button>
      <button @click="switchCol(5)">5column(列)</button>
      <button @click="switchCol(8)">8column(列)</button>
      <button @click="switchCol(10)">10column(列)</button>
      <button @click="reset">reset(重置)</button>
      <a
        style="color: red"
        href="https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md"
        target="_blank"
        >GITHUB</a
      >
      <b style="color: blue">滚动至底部可触发loadmore</b>

      <div class="githubdata" @click="toGitHub">
        <button class="blue-light">
          Star
          <span>{{ gitHubData.stargazers_count }}</span></button
        ><button class="blue-light">
          Fork
          <span>{{ gitHubData.forks_count }}</span>
        </button>
      </div>
    </div>
    <waterfall :col="col" :data="data" @loadmore="loadmore">
      <template>
        <div class="cell-item" v-for="(item, index) in data" :key="index">
          <img
            v-if="item.img"
            :lazyDistance="10"
            :lazy-src="item.img"
            alt="加载错误"
          />
          <div class="item-body">
            <div class="item-desc">{{ item.title }}</div>
            <div class="item-footer">
              <div
                v-if="item.avatar"
                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.like }}</div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </waterfall>
  </div>
</template>

<script>
/*
  注意:
  1.itemWidth需要与gutterWidth一起使用才会生效，否则会进行自适应宽度
  2.使用了waterfall的组件不允许使用scoped,否则样式会有问题
*/
// import Vue from 'vue'
// import  routerLink  from 'vue-router'
export default {
  props: {
    title: String,
  },
  components: {},
  data() {
    return {
      data: [],
      col: 5,
      loading: false,
      gitHubData: {},
      originData: [
        {
          img: "https://image.watsons.com.cn//upload/8a316140.png?w=377&h=451&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "最近浴室新宠，日系神仙好物了解一下～",
          user: "www",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/083767f0.JPG?w=828&h=620&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "150元搞定全套护肤品，这些护肤好物必须交出来！",
          user: "迷人的小妖精迷人的小妖精",
          like: "952",
        },
        {
          img: "https://image.watsons.com.cn//upload/02a4f38d.jpg?w=1067&h=1067&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/589585c1.jpeg?x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/d862d932.jpg?w=1080&h=1440&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/eb4fb58f.jpg?w=1080&h=1080&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/99253111.jpg?w=1080&h=1920&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/415f984f.jpeg?w=828&h=1104&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/5c3e51e4.jpg?w=720&h=960&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title: "夏天用这款姨妈巾，让你体验真正的清爽",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/60cc9b8e.jpg?w=991&h=744&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试1",
          user: "迷人的小妖精迷人的小妖精123",
          like: "953",
        },
        {
          img: "https://image.watsons.com.cn//upload/b709ed72.jpg?w=552&h=414&x-oss-process=image/resize,w_1080",
          avatar:
            "https://img.xiaohongshu.com/avatar/5b7d198a7e6e15000155f7c9.jpg@80w_80h_90q_1e_1c_1x.jpg",
          title:
            "贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试贵妇级好用的水乳有哪些呢？千万不要去乱尝试",
          user: "迷人的小妖精迷人的小妖精",
          like: "953",
        },
      ],
    };
  },
  computed: {
    itemWidth() {
      return 133 * 0.5 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 10 * 0.5 * (document.documentElement.clientWidth / 375);
    },
  },
  methods: {
    toGitHub() {
      window.open(
        "https://github.com/Rise-Devin/vue-waterfall2/blob/master/README.md",
        "_blank"
      );
    },
    reset() {
      this.data = [];
    },

    switchCol(col) {
      this.col = col;
      // console.log(this.col)
    },
    getGitHub() {
      fetch("https://api.github.com/repos/AwesomeDevin/vue-waterfall2").then(
        (data) => {
          data.json().then((res) => {
            // console.log(res)
            this.gitHubData = res;
          });
        }
      );
    },

    loadmore(num) {
      // Vue.set(this.data[index],'liked',true)
      // const obj = {c:123,d:456}
      // const {c:a,d:b} = obj
      console.log("loadmore", num);
      this.loading = true;
      setTimeout(() => {
        this.data = this.data.concat(this.originData, this.originData);
        this.loading = false;
        // console.log(this.data.length)
      }, 1000);
      // this.$waterfall.resize()
    },
  },
  mounted() {
    this.data = this.originData;
    this.getGitHub();
    // this.data = []
  },
};
</script>
<style  lang="sass" scoped>
*
  margin: 0

.container-water-fall
  // padding: 0 28px;
  width: 100vw
  box-sizing: border-box
  h4
    padding-top: 56px
    padding-bottom: 28px
    font-family: PingFangSC-Medium
    font-size: 36px
    color: #000000
    letter-spacing: 1px
    text-align: justify

  button
    background-color: #ff0
    color: #24292e
    border: 1px solid rgba(27, 31, 35, 0.2)
    border-radius: 0.25em
    width: 100px
    line-height: 26px
    font-size: 13px
    margin: 4px 0
    margin-right: 4px
    cursor: pointer
    outline: none
    &.blue-light
      background: #27fbc2

  button:hover
    background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%)

  .cell-item
    width: 100%
    // margin-bottom: 18px;
    background: #ffffff
    border: 2px solid #f0f0f0
    border-radius: 12px 12px 12px 12px
    overflow: hidden
    box-sizing: border-box
    img
      // border-radius: 12px 12px 0 0;
      width: 100%
      height: auto
      display: block

    .item-body
      // border: 1px solid #F0F0F0;
      padding: 12px
      .item-desc
        font-size: 15px
        color: #333333
        line-height: 15px
        font-weight: bold

      .item-footer
        margin-top: 22px
        position: relative
        display: flex
        align-items: center
        .avatar
          width: 44px
          height: 44px
          border-radius: 50%
          background-repeat: no-repeat
          background-size: contain

        .name
          max-width: 150px
          margin-left: 10px
          font-size: 14px
          color: #999999

        .like
          position: absolute
          right: 0
          display: flex
          align-items: center
          &.active
            i

      &-total
        color: #ff4479

        i
          width: 28px
          display: block

    &-total
      margin-left: 10px
      font-size: 12px
      color: #999999

.githubdata
  float: right
  margin-right: 90px
  img
    width: 14px
    // height: 16px;
</style>