1.0.0 • Published 6 years ago

vue-simple-waterfall v1.0.0

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

vue-simple-waterfall

English | 中文

I made some changes to resolve some problem and make it easily by vue-waterfall. vue-waterfall link is (https://www.npmjs.com/package/vue-waterfall)

preview image

preview

Installation

npm install --save vue-simple-waterfall

Import

ES6

/* in xxx.vue */
import { Waterfall, WaterfallSlot } from  'vue-simple-waterfall'

export default {
...
components: {
  Waterfall,
  WaterfallSlot
},
...
}

HTML structure

<waterfall :line-gap="10" :item-width="160" :watch="imageList">
  <waterfall-slot
    v-for="(item, index) in  imageList" 
   :height="item.height  *  160  /  item.width"
   :order="index"
   :key="index"
  >
  <!--
    your component
  -->
  </waterfall-slot>
</waterfall>

Props

waterfall

NameDefaultDescription
line-gap-Required. The standard space (px) between lines
item-width-Required. The width (px) of each item.
watch[]Watch something, reflow when it changes.
auto-resizetrueReflow when window size changes.

waterfall-slot

NameDefaultDescription
height-Required. The height of slot.
order0The order of slot, often be set to index in v-for .
key''The unique identification of slot, required for transition.