vue-lazy-waterfall

A Vue.js component to render waterfall layout for Vue.js v2.x+.

Documentation

• 中文
• English

Features

• No extra dependencies except Vue
• Lazy load
• Automation layout

Installation

npm install vue-lazy-waterfall --save

And it's also available on jsDelivr

<script src="//cdn.jsdelivr.net/npm/vue-lazy-waterfall"></script>

Examples

• demo
• custom lazy loader demo
• resize demo

Usage

simple example

use in html temlate:

<template>
<div>
  <vueLazyWaterfall :items="items"
                  ref="waterfall"
                  @load="loadData">
                   <div class="pin-item" slot-scope="{item}">
                          <img :src="item.src" alt="">
                        </div>
</vueLazyWaterfall>
</div>
</template>

used by es6 import

//es6 import
import vueLazyWaterfall from 'vue-lazy-waterfall';

export default {
  name: 'app',
  data(){
      return {
        items: []
      }
  },
  components: {
    vueLazyWaterfall
  }
}

used by script link

<script src="dist/vue-lazy-waterfall/index.js"></script>

new Vue({
  el: '#app',
  data(){
      return {
        items: []
      }
  },
  components: {
    vueLazyWaterfall
  },
  
  methods: {
    loadData(){
      //load data
      //stop lazy load: this.$refs.waterfall.end()
    }
  }
})

example with more custom configuration

<template>
<div>
  <vueLazyWaterfall :items="items"
                  ref="waterfall"
                  :width="1100"
                  :colNum="4"
                  @image-load="imageLoadHandler"
                  @image-error="imageLoadHandler"
                  @click="clickItemHandler"
                  @load="loadData">
                   <template slot-scope="{item}">
                      <div class="pin-item">
                         <img :src="item.src" alt="">
                         <p>{{item.info}}</p>
                       </div>
                   </template>
                   <div slot="endToBottom">it is end...</div>
  </vueLazyWaterfall>
</div>
</template>

<script>
import vueLazyWaterfall from 'vue-lazy-waterfall'

export default {
  name: 'waterfall-app',
  data(){
      return {
        items: [],
        page: 0
      }
  },
  components: {
    vueLazyWaterfall
  },
  
  methods: {
    loadData(){
      this.mockPageData()
      .then((arr)=>{
        this.items = this.items.concat(arr)
        this.page++
        if (this.page === 10) {
          this.$refs.waterfall.end()
        }
      })
    },
    mockPageData(){
      var items = []
      for (var i = 0; i < 10; i++) {
        let width = parseInt(Math.random() * 100) + 300
        let height = parseInt(Math.random() * 100) + 300
        items.push({
          src: `https://picsum.photos/${width}/${height}/?random`,
          info: Math.random().toString().substring(3)
        })
      }
      
      return Promise.resolve(items)
    },
    imageLoadHandler(item){
      console.log(item.$event)
    },
    clickItemHandler(item){
      console.log('click ', item)
    }
  }
}
</script>

createLazyLoader example

<template>
  <div class="wrap">
    <vueLazyWaterfall :items="items"
                      ref="waterfall"
                      :width="1190"
                      :createLazyLoader="createLazyLoader"
                      @load="loadData">
      <template slot-scope="{item}">
        <div class="pin-item">
          <img :src="item.src" alt="">
          <p>{{item.info}}</p>
        </div>
      </template>
      <template slot="endToBottom">
        <div>it is end...</div>
      </template>
    </vueLazyWaterfall>
  </div>
</template>

<script>
  import vueLazyWaterfall from '../../src/vue-lazy-waterfall'
  import lozad from 'lozad'

  export default {
    name: 'waterfall-lazy-app',
    data() {
      return {
        items: [],
        page: 0
      }
    },
    components: {
      vueLazyWaterfall
    },

    methods: {
      loadData() {
        return this.mockPageData()
          .then((arr) => {
            this.items = this.items.concat(arr)
            this.page++
            if (this.page === 20) {
              this.$refs.waterfall.end()
            }
          })
      },
      mockPageData() {
        var items = []
        for (var i = 0; i < 20; i++) {
          let width = parseInt(Math.random() * 100) + 300
          let height = parseInt(Math.random() * 100) + 300
          items.push({
            src: `https://picsum.photos/${width}/${height}/?random`,
            info: +new Date()
          })
        }

        return Promise.resolve(items)
      },
      createLazyLoader($loading) {
        const self = this
        const observer = lozad($loading, {
          load: function () {
            self.loadData()
          },
          loaded() {
            setTimeout(() => {
              $loading.dataset.loaded = false
              observer.observe($loading)
            }, 1e3)
          },
          rootMargin: '500px',
          threshold: 0.9
        });
        observer.observe()
      }
    }
  }
</script>

Options

props

| name | type | default | description | | --- | --- | --- | --- | | items | Array | - | array of list items to render | | colNum | Number | 5 | number of columns to render items | | width | Number | width of window | define how width to render waterfall layout | | itemWidth | Number | - | calculate by the colNum and the width| | diff | Object | {top: 0, right: 0, bottom: window.innerHeight, left: 0} | offset config to determine when to fire load event| | createLazyLoader | Function | - | create your own lazy loader | | autoMode| Boolean| true| render the item one by one when the one's image is ready. If it is false, the waterfall view will render the items by loaded order |imageFilter| Function| - | handle the image's src property whatever you want before load the image | maxLoading| Boolean | 2 | the max number of loading data at the same time

events

| name | default | description | | --- | --- | --- | | load| - | triggered to load the data of next page | click | - | triggered by when the item was clicked | image-load | - | triggered by when the image was loaded successfully | image-error | - | triggered by when the image was loaded error | finished| - | all images requested by the waterfall are loaded

slots

| name | default | slot-scope | description| | --- | --- | --- | --- | | loading | - | - | loading content placeholder to be showed when the waterfall is not finished | | endToBottom| - | - | it will show up when the waterfall was scrolled to end | - | - | item | each item's content to display

License

MIT License