【简单好用，支持懒加载】 vue-waterfall2 基于Vue.js 瀑布流 组件

vue-waterfall2

• 1.不需知道元素宽高，可宽高自适应
• 2.支持无图模式,内容自定义程度高
• 3.支持懒加载(lazy-src)
• 4.提供Event:loadmore (pc/android端滑动到底部触发，ios端需要上拉触发)
• 5.使用极为简便,适用于PC/ios/android

有问题欢迎提issues、suggestions;Thank you for your Star !
welcome to my blog(JS/前端工程化/Python/算法) ！！！

Demo

Common Demo
Lazyload Demo
Code Demo

GITHUB

npm i 
npm run dev

Installation

 npm i vue-waterfall2@latest --save

属性

Name	Default	Type	Desc
height	100%	String	容器高度
col	2	Number	列数
width	-	Number	宽度
gutterWidth	10	Number	间隔的宽度
data	[]	Array	数据
isTransition	true	Boolean	加载图片是否使用过渡动画
lazyDistance	300	Number	触发图片懒加载的距离
loadDistance	300	Number	触发上拉加载更多的距离

懒加载

对于需要使用懒加载的图片，需要使用lazy-src属性

Events

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

$waterfall API

this.$waterfall.forceUpdate()   //forceUpdate

Usage

注意:

1. gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
2. 使用了waterfall的父组件,如果样式存在问题，可去掉css scoped尝试一下

main.js

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

app.vue

/*
  注意:
  1. gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
  2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下
*/

import Vue from 'vue'
    export default{
        data(){
            return{
                data:[],
                col:5,
            }
        },
        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)
          }
        }
    }