vue插件瀑布流之 vue-waterfall2

步骤一：安装依赖

 npm i vue-waterfall2@latest --save

步骤二：main.js中引入

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

 

属性

Name	Default	Type	Desc
height	-	String	容器高度(height为空监听的是window的滚动事件，不为空则监听容器滚动)
col	2	Number	列数
width	-	Number	宽度
gutterWidth	10	Number	间隔的宽度
data	[]	Array	数据
isTransition	true	Boolean	加载图片是否使用过渡动画
lazyDistance	300	Number	触发图片懒加载的距离
loadDistance	300	Number	触发上拉加载更多的距离

Events

Name	Data	Desc
loadmore	-	滚动到底部触发
scroll	info	获取滚动时的event对象
finish	-	完成元素渲染

举个栗子： 

      <waterfall :col="8" :data="[1,2,3,4,5,6,7,8,9,10,11]">
        <template>
          <div
            class="pr pbImgBox"
            v-for="(item,index) in [1,2,3,4,5,6,7,8,9,10,11]"
            :key="index"
          >
            <img :src="'images/'+item+'.jpg'" alt="加载错误" />
            <span class="textOver">夏热防暑误区热点公众号首图</span>
          </div>
        </template>
      </waterfall>

 

    import Vue from 'vue'
	export default{
	    data(){
	        return{
	            data:[],
	        }
	    },
	    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中即可)
	      }
	    },
        //下边的内容没有用到，需要的小伙伴可以看文档了解，如果需求后续回更新
	    methods:{
            scroll(scrollData){
                console.log(scrollData)
            },
	        switchCol(col){
	            this.col = col
	            console.log(this.col)
	      },
	      loadmore(index){
	            this.data = this.data.concat(this.data)
	      }
	    }
	}

效果图：

ps：

1、vue-waterfall2文档地址：https://github.com/AwesomeDevin/vue-waterfall2/blob/master/CHINESE-README.md#vue-waterfall2

公司项目有这个需求就查了一下，帮助到我了，希望帮助到更多需要的小伙伴，好东西大家一起分享！！！