https://codesandbox.io/s/vue-waterfall2-local-demo-99ps6?from-embed=&file=/src/components/waterfall.vue:3965-3974

1、vue使用

1.1、安装

npm i vue-waterfall2

1.2、main.js引入

import waterfall from ‘vue-waterfall2’
Vue.use(waterfall)

1.3、页面使用

<div class="rendering">
    <waterfall :col="col" :data="renderList" @loadmore="loadmore" :gutterWidth="0">

        <div class="imgBox1" v-for="it in renderList" :key="it.index" @click="goDetail(it.id)">
            <div class="img">
                <img :src="it.cover.split(',')[0]" alt="">
            </div>
            <p>{{ it.title }}</p>
        </div>

    </waterfall>
</div>

<script>
export default {
	data() {
		return {
			col: 2, // 两列
		}
	},
    methods: {
		// 上拉加载
        loadmore() {
          console.log("--加载更多---");
          // 假设已经到底，实际根据api接口返回值判断
          if (this.renderList.length >= this.total) {
            this.finished = true;
            return;
          }
          this.getList();
        },
	}
}
</script>

2、nuxtJs使用

2.1、在 plugins下新建一个waterfall.js文件

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

2.2、在nuxt.config.js中的plugins下添加一项'@/plugins/waterfall'

plugins: [
   { src: '~/plugins/waterfall.js', ssr: false } // 加的这个
],

2.3、页面使用：跟vue一样

使用这个瀑布流的话最好用它自带的loadmore