Vue<瀑布流加载效果>

效果图：

waterfallFlow.gif

😀身为程序员不仅要'造轮子'玩，更要学会找轮子玩。今天有点闲，就想着学学怎么实现瀑布流效果，找了找发现用原生js实现起来也不算太困难，但是网上的写法却有很多种，而且有的并不符合在项目中的实际应用，想了解实现原理的可以参考这篇文章https://blog.csdn.net/zhaoxiang66/article/details/82876492。

因此找到了 vue-waterfall 这个好东西，人家封装好的组件，可以拿来用哦！而且实用性也比较强，gitHub也是有1.7k的星星✨，感觉还是很可靠的。
gitHub地址和相关参数配置地址：https://github.com/MopTym/vue-waterfall

此篇文章主要讲的是如何利用 element-ui(无限滚动) + vue-waterfall 实现在项目中，滑到底部加载更多的具体实现~~~
····
不太熟悉element-ui(无限滚动)的
可以参考官方文档https://element.eleme.cn/#/zh-CN/component/infiniteScroll
也可以参考这篇文章https://www.jianshu.com/p/4ce227a72cd0
····
npm install --s element-ui vue-waterfall

代码如下:

<template>
  <div
    class="main"
    ref="main"
    v-infinite-scroll="load"
    infinite-scroll-disabled="disabled"
    infinite-scroll-delay="500"
  >
    <!-- infinite-scroll-delay  element-ui 默认是200ms ，interval  vue-waterfall 的回流动作之间的最小时间间隔也是 200ms,相等的话会有冲突 -->
    <waterfall :line-gap="w/waterLine">
      <waterfall-slot
        v-for="(item, index) in list"
        :width="w/waterLine"
        :height="randomHeightList[index].height"
        :order="index"
        :key="item.id"
      >
        <div class="box" :style="`animation-delay: ${randomHeightList[index].delay}s`">
          <div class="content" :style="`background:${randomHeightList[index].bck}`">
            <div class="img" v-if="item.imgUrl">IMG</div>
            <div class="msg">{{index+1}}</div>
          </div>
        </div>
      </waterfall-slot>
    </waterfall>
    <section class="noMore">
      <p v-if="loading" style="margin-top:10px;" class="loading">
        <span></span>
      </p>
      <p v-if="noMore" style="margin:10px 0;font-size:12px;color:#ccc">没有更多了</p>
    </section>
  </div>
</template>

<script>
import { waterfall, WaterfallSlot } from "vue-waterfall";
export default {
  components: {
    waterfall,
    WaterfallSlot
  },
  data() {
    return {
      w: 0, //窗口宽度
      waterLine: 3, //几列瀑布流  此处是3列
      randomMinHeight: 120, //随机最小高度
      randomMaxHeight: 300, //随机最大高度
      totalPages: 0, //后端返回的总条数
      count: 0, //起始页码
      list: [], //后端返回的数据列表
      scrollbarWidth: 0, //滚动条宽度
      loading: false,
      randomHeightList: [] //储存随机高度的列表，避免再次请求数据，list改变导致数据重新渲染
    };
  },
  computed: {
    noMore() {
      //当起始页数大于总页数时停止加载
      return this.count >= this.totalPages - 1;
    },
    disabled() {
      return this.loading || this.noMore;
    }
  },
  created() {
    this.getMessage();
  },
  mounted() {
    this.judgeScroll();
  },
  methods: {
    // m~n之间的随机整数
    random(m, n) {
      return Math.floor(Math.random() * (n - m + 1) + m);
    },
    //解决PC端有滚动条时造成的窗口变化，导致无法铺满整个屏幕
    judgeScroll() {
      let odiv = this.$refs["main"];
      this.scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;
      this.w = window.innerWidth - this.scrollbarWidth;
    },
    //滑到底部时进行加载
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 1; //页数+1
        this.getMessage(); //调用接口，此时页数+1，查询下一页数据
      }, 2000);
    },
    //获取后端返回的数据信息
    getMessage() {
      let params = {
        pageNumber: this.count, //查询页数
        pageSize: 20 //每页查询条数
      };
      this.$axios
        .post(
          "https://xxxxxx后端的数据分页接口xxxxxxxx",
          params,
        )
        .then(res => {
          console.log(res);

          //每次请求数据都会把相对应的随机瀑布高度给存到 randomHeightList ，方便list变化时，直接取相对应的randomHeightList 高度
          let heightList = [];
          for (let i = 0; i < res.data.body.content.length; i++) {
            let obj = {
              height: this.random(this.randomMinHeight, this.randomMaxHeight),
              bck: `hsl(210, 100%, ${this.random(63, 85)}%)`,
              delay: i / 10
            };
            heightList.push(obj);
          }
          this.randomHeightList = this.randomHeightList.concat(heightList);

          //因为每次后端返回的都是数组，所以这边把数组拼接到一起
          this.list = this.list.concat(res.data.body.content);
          this.totalPages = res.data.body.totalPages;
          this.loading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.main {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: scroll;
}
.noMore {
  width: 100%;
}
.loading span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #409eff;
  border-left: 2px solid transparent;
  animation: zhuan 0.5s linear infinite;
  border-radius: 50%;
}
@keyframes zhuan {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
  box-sizing: border-box;
  animation: BOX 0.5s ease both 1;

  .content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    &:hover .msg {
      transform: scale(1.5);
    }
    .img {
      width: 100%;
      height: 100%;
      color: white;
      font-weight: 400;
      position: absolute;
      background: #409eff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      z-index: 99;
      &:hover {
        opacity: 0;
      }
    }
    .msg {
      transition: 0.5s;
      color: white;
      font-weight: 200;
      font-size: 2rem;
    }
  }
}
@keyframes BOX {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
</style>

点个赞呗 👍 ~~