vue-waterfall2
vue plugin for waterfall
Last updated a year ago by rise-devin .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-waterfall2 
SYNC missed versions from official npm registry.

中文版文档

vue-waterfall2

  1. auto adaption for width and height
  2. High degree of customization
  3. support lazy load(attribute with lazy-src)

The demo on mobile device

If you have some questions,welcome to describe issues、suggestions;Thank you for your Star !
Welcome to my blog !!!

Demo

Common Demo
Lazyload Demo
Code Demo

GITHUB

npm i 
npm run dev

Installation

 npm i vue-waterfall2@latest --save

<waterfall> Props

Name Default Type Desc
height null Number height of container
col 2 Number The number of column
width null Number The width of each column
gutterWidth 10 Number The value of margin
data [] Array data
isTransition true Boolean load image with transition
lazyDistance 300 Number The distance of image lazy loading
loadDistance 300 Number The distance of loadmore

Lazy Load

For images that need to be loaded lazily, the 'lazy-src' attribute needs to be used

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

<waterfall> Events

Name Data Desc
loadmore - Scroll to the bottom to trigger on PC / pull up to trigger on Mobile
scroll obj Scroll to trigger and get the infomation of scroll
finish - finish render

$waterfall API

this.$waterfall.forceUpdate()   //forceUpdate

Usage

Notes:

  1. attribute gutterWidth needs to be used together with width to be effective, otherwise it will be adaptive width (when using rem to layout, calculate the width after adaptation before passing the value).
  2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS scoped and try it
main.js
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
app.vue
<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">
          <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>


/*
  notes:
  1. attribute `gutterWidth` needs to be used together with `width` to be effective, otherwise it will be adaptive width (when using `rem` to layout, calculate the width after adaptation before passing the value).
  2. Use the parent component of 'waterfall' if there is a problem with the style, remove CSS 'scoped' and try it
*/

import Vue from 'vue'
	export default{
	    data(){
	        return{
	            data:[],
	            col:5,
	        }
	    },
	    computed:{
	      itemWidth(){  
	            return (138*0.5*(document.documentElement.clientWidth/375))  #rem to layout, Calculate the value of width 
	      },
	      gutterWidth(){
	            return (9*0.5*(document.documentElement.clientWidth/375)) #rem to layout, Calculate the value of margin 
	      }
	    },
	    methods:{
            scroll(scrollData){
                console.log(scrollData)
            },
	        switchCol(col){
	            this.col = col
	            console.log(this.col)
	      },
	      loadmore(index){
	            this.data = this.data.concat(this.data)
	      }
	    }
	}

Current Tags

  • 1.10.1                                ...           latest (a year ago)

70 Versions

  • 1.10.1                                ...           a year ago
  • 1.9.6                                ...           2 years ago
  • 1.9.5                                ...           2 years ago
  • 1.9.4                                ...           2 years ago
  • 1.9.3                                ...           2 years ago
  • 1.9.2                                ...           2 years ago
  • 1.9.1                                ...           2 years ago
  • 1.8.22                                ...           2 years ago
  • 1.8.21                                ...           2 years ago
  • 1.8.20                                ...           2 years ago
  • 1.8.19                                ...           2 years ago
  • 1.8.18                                ...           2 years ago
  • 1.8.17                                ...           2 years ago
  • 1.8.16                                ...           2 years ago
  • 1.8.14                                ...           2 years ago
  • 1.8.13                                ...           2 years ago
  • 1.8.12                                ...           2 years ago
  • 1.8.11                                ...           2 years ago
  • 1.8.10                                ...           2 years ago
  • 1.8.9                                ...           3 years ago
  • 1.8.8                                ...           3 years ago
  • 1.8.7                                ...           3 years ago
  • 1.8.6                                ...           3 years ago
  • 1.8.5                                ...           3 years ago
  • 1.8.4                                ...           3 years ago
  • 1.8.3                                ...           3 years ago
  • 1.8.2                                ...           3 years ago
  • 1.8.1                                ...           3 years ago
  • 1.7.7                                ...           3 years ago
  • 1.7.6                                ...           3 years ago
  • 1.7.5                                ...           3 years ago
  • 1.7.4                                ...           3 years ago
  • 1.7.3                                ...           3 years ago
  • 1.7.2                                ...           3 years ago
  • 1.7.1                                ...           3 years ago
  • 1.6.5                                ...           3 years ago
  • 1.6.4                                ...           3 years ago
  • 1.6.2                                ...           3 years ago
  • 1.6.1                                ...           3 years ago
  • 1.6.0                                ...           3 years ago
  • 1.5.2                                ...           3 years ago
  • 1.5.1                                ...           3 years ago
  • 1.5.0                                ...           3 years ago
  • 1.4.4                                ...           3 years ago
  • 1.4.3                                ...           3 years ago
  • 1.4.2                                ...           3 years ago
  • 1.4.1                                ...           3 years ago
  • 1.4.0                                ...           3 years ago
  • 1.3.0                                ...           3 years ago
  • 1.2.7                                ...           3 years ago
  • 1.2.6                                ...           3 years ago
  • 1.2.5                                ...           3 years ago
  • 1.2.4                                ...           3 years ago
  • 1.2.3                                ...           3 years ago
  • 1.2.2                                ...           3 years ago
  • 1.2.1                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 1.1.1                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.10                                ...           3 years ago
  • 1.0.9                                ...           3 years ago
  • 1.0.8                                ...           3 years ago
  • 1.0.7                                ...           3 years ago
  • 1.0.6                                ...           3 years ago
  • 1.0.5                                ...           3 years ago
  • 1.0.4                                ...           3 years ago
  • 1.0.3                                ...           3 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Total 65,827
Today 3
This Week 974
This Month 580
Last Day 172
Last Week 1,114
Last Month 4,985
Dependencies (2)
Dev Dependencies (3)

Copyright 2014 - 2021 © npmmirror.com |