vue使用插件实现瀑布流布局

安装插件

 npm i vue-waterfall2@latest --save

在main.js中全局引入

import waterfall from "vue-waterfall2";

Vue.use(waterfall);

组件实现思路：

1.组件下创建一个slot插槽，开发时将要进行瀑布流布局的元素放入插槽中；
2.根据瀑布流布局的列数在父组件下创建对应数量的div，通过float：left或是flex布局将这些div分布为多栏布局；
3.计算每一栏的高度，获取最矮的一栏；
4.将slot插槽中的元素一个个的放入最矮的一栏中；
5.重复3，4步骤，直到所有的元素都布局完毕。

上代码！

HTML中 

<waterfall :col="col" :data="list" :gutterWidth="gutterWidth">

      <template>

           <img
             :src="v.browse_cover_url"
              v-for="(v, k) in list"
              :key="k"
               @click="infos(v.id)"
               class="btn"
            />
      </template>

</waterfall>

 Js中，主要就是依赖这个计算属性

  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中即可)

    },

  },

col是设置多少列，在data里自行设置即可