vue-waterfall2

  • 1. It is not necessary to know the width and height of elements, and the width and height can be adaptive
  • 2. Support no graph mode, high degree of content customization
  • 3. Support lazy loading (lazy-src)
  • 4. Provide Event: loadMore (slide to the bottom on PC/Android and need to pull up on ios)
  • 5. Extremely easy to use, suitable for PC/ios/ Android

Welcome to raise issues and suggestions if you have any questions. Thank you for your Star ! Welcome to my blog(JS/ front-end Engineering /Python/ algorithms)!!

Demo

Common Demo

Lazyload Demo

Code Demo

GITHUB

npm i 
npm run dev
Copy the code

Installation

 npm i vue-waterfall2@latest --save
Copy the code

attribute

Name Default Type Desc
height 100% String Height of the container
col 2 Number The number of columns
width – Number The width of the
gutterWidth 10 Number Spacing width
data [] Array data
isTransition true Boolean Whether to use transition animation to load images
lazyDistance 300 Number Trigger image lazy loading distance
loadDistance 300 Number Trigger pull-up loading for more distance

Lazy loading

For images that require lazy loading, use the lazy-src attribute

<waterfall :col='col'   :data="data"     >
  <template>
     <img v-if="item.img" :lazy-src="item.img" alt="Loading error"  />
  </template>
</waterfall>
Copy the code

Events

Name Data Desc
loadmore – Scroll to the bottom trigger
scroll obj Gets the event object when scrolling
finish – Complete element rendering

$waterfall API

this.$waterfall.forceUpdate()   //forceUpdate
Copy the code

Usage

Note:

  1. gutterWidthNeed to bewidthOnly when used together will it take effect, otherwise the adaptive width will be carried out (when rem layout is used, the adaptive width should be calculated before transmission)
  2. Using thewaterfallIf there is a problem with the style, remove the CSSscopedGive it a try
main.js
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
Copy the code
app.vue
<template> <div class="container-water-fall"> <div><button @click="loadmore">loadmore</button> <button <button @click="switchCol('8')">8 </button> < butt@click ="switchCol('10')">10 columns </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 =" "load error" / > < div class = "item - body" > < div class = "item - desc" > {{item. The 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> /* Note: 1. GutterWidth needs to be used together with width to take effect, otherwise it will carry out adaptive width (if using REM layout, you need to calculate the adaptive width before transferring the value) 2. Using 'Waterfall' 's parent component, if there is a problem with the style, Scoped */ import Vue from 'Vue' export default{data(){return{data:[], col:5,}}, Computed: {itemWidth () {return (138 * 0.5 * (375). The document. The documentElement clientWidth /) # rem layout calculation width}, GutterWidth () {return (9 * 0.5 * (375). The document. The documentElement clientWidth /) # rem layout to calculate the x axis margin (y direction of margin in the custom 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) } } }Copy the code