Because vue-waterfall last update was 6 years ago, and naturally did not support Vue3. I have now supported Vue3 based on the previous code. 🎉

** Adjust point: **

• The upgrade to Vue3 setup 🚀
• Written with Typescript
• Webpack switch to vite packaging

At present, there is no adjustment of the layout algorithm, and the performance adjustment code may be optimized later.

vue-waterfall

A waterfall layout component for Vue.js .

Demo

• Vertical line
• Horizontal line
• Vertical line with grow [There is still some problem]

Installation

npm install --save vue-waterfall

Usage

Vue-waterfall is a UMD module, which can be used as a module in both CommonJS and AMD modular environments. When in non-modular environment, Waterfall will be registered as a global variable.

Import

ES6

/* in xxx.vue */

import { Waterfall, WaterfallSlot } from 'vue-waterfall3'
export default {
  ...
  components: {
    Waterfall,
    WaterfallSlot
  },
  ...
}

ES5

var Vue = require('vue')
var VueWaterfall = require('vue-waterfall3')

var YourComponent = Vue.extend({
  ...
  components: {
    'waterfall': VueWaterfall.Waterfall,
    'waterfall-slot': VueWaterfall.WaterfallSlot
  },
  ...
})

Browser

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-waterfall/vue-waterfall.umd.js"></script>

new Vue({
  ...
  components: {
    'waterfall': VueWaterfall.Waterfall,
    'waterfall-slot': VueWaterfall.WaterfallSlot
  },
  ...
})

HTML structure

<waterfall :line-gap="200" :watch="items">
  <!-- each component is wrapped by a waterfall slot -->
  <waterfall-slot
    v-for="(item, index) in items"
    :width="item.width"
    :height="item.height"
    :order="index"
    :key="item.id"
  >
    <!--
      your component
    -->
  </waterfall-slot>
</waterfall>

Props

waterfall

Name	Default	Description
line	v	v or h . Line direction.
line-gap	-	Required. The standard space (px) between lines.
min-line-gap	= line-gap	The minimal space between lines.
max-line-gap	= line-gap	The maximal space between lines.
single-max-width	= max-line-gap	The maximal width of slot which is single in horizontal direction.
fixed-height	false	Fix slot height when line = v .
grow	-	Number Array. Slot flex grow factors in horizontal direction when line = v . Ignore *-gap .
align	left	left or right or center . Alignment.
auto-resize	true	Reflow when window size changes.
interval	200	The minimal time interval (ms) between reflow actions.
watch	{}	Watch something, reflow when it changes.

waterfall-slot

Name	Default	Description
width	-	Required. The width of slot.
height	-	Required. The height of slot.
order	0	The order of slot, often be set to index in v-for .
key	''	The unique identification of slot, required for transition.
move-class	-	Class for transition. see vue-animated-list .

Transition

Inspired by vue-animated-list , vue-waterfall supports moving elements with translate in transition, click on the demo page to see it.

vue-waterfall has not supported <transition-group> in Vue 2 ( #10 ) .

Events

ON ( 'reflow' ) {
  reflow
}
// trigger reflow action: waterfallVm.$emit('reflow')

AFTER ( reflow ) {
  emit 'reflowed'
}
// waterfallVm.$on('reflowed', () => { console.log('reflowed') })

Reactivity

WHEN ( layout property changes ) { /* line, line-gap, etc. */
  reflow
}

WHEN ( slot changes ) { /* add, remove, etc. */
  reflow
}

License

Released under the MIT License.