【簡單好用，支持懶加載】 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

GITHUB

npm i 
npm run dev
複製代碼

Installation

npm i vue-waterfall2@latest --save
複製代碼

Usage

注意:

1. gutterWidth須要與width一塊兒使用纔會生效，不然會進行自適應寬度(使用rem佈局時，需先計算出自適應後的寬度再傳值)
2. 使用了waterfall的父組件,若是樣式存在問題，可去掉css scoped嘗試一下

main.js

import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
複製代碼

app.vue(此組件 style不使用 scoped)

<template>
  <div class="container-water-fall">
    <div><button @click="loadmore">loadmore</button> <button @click="mix">mix</button> <button @click="switchCol('5')">5列</button> <button @click="switchCol('8')">8列</button> <button @click="switchCol('10')">10列</button> </div>

    <waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="data" @loadmore="loadmore" @scroll="scroll" >
      <template >
        <div class="cell-item" v-for="(item,index) in data">
          <img v-if="item.img" :src="item.img" alt="加載錯誤" /> 
          <div class="item-body">
              <div class="item-desc">{{item.title}}</div>
              <div class="item-footer">
                  <div class="avatar" :style="{backgroundImage : `url(${item.avatar})` }"></div>
                  <div class="name">{{item.user}}</div>
                  <div class="like" :class="item.liked?'active':''" >
                      <i ></i>
                      <div class="like-total">{{item.liked}}</div>  
                  </div>
              </div>
          </div>
        </div>
      </template>
    </waterfall>
    
  </div>
</template>


/*
  注意:
  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)
	      }
	    }
	}
複製代碼

屬性

Name	Default	Type	Desc
col	2	Number	列數
width	null	Number	寬度
gutterWidth	10	Number	間隔的寬度
data	[]	Array	數據
isTransition	true	Boolean	加載圖片是否使用過渡動畫
lazyDistance	300	Number	圖片進行懶加載的距離
loadDistance	300	Number	上拉加載更多的距離

懶加載

對於須要使用懶加載的圖片，須要使用lazy-src屬性

<waterfall :col='col' :data="data" >
  <template>
     <img v-if="item.img" :lazy-src="item.img" alt="加載錯誤" />
  </template>
</waterfall>
複製代碼

Events

Name	Data	Desc
loadmore	null	滾動到底部觸發
scroll	obj	獲取滾動時的event對象

$waterfall API

this.$waterfall.forceUpdate()   //forceUpdate
複製代碼