vue-lazy-waterfall
A Vue.js component to render waterfall layout for Vue.js v2.x+.
Documentation
Features
- No extra dependencies except Vue
- Lazy load
- Automation layout
Installation
npm install vue-lazy-waterfall --save
And it's also available on jsDelivr
Examples
Usage
simple example
use in html temlate:
used by es6 import
//es6 import; name: 'app' { return items: } components: vueLazyWaterfall
used by script link
el: '#app' { return items: } components: vueLazyWaterfall methods: { //load data //stop lazy load: this.$refs.waterfall.end() }
example with more custom configuration
{{item.info}} it is end...
createLazyLoader example
{{item.info}} it is end...
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 |