vue-waterfall
A waterfall layout component for Vue.js .
Branch
0.x (version 0.x.x) is compatible with Vue 1 .
Demo
Installation
```shell
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
```js
/
in xxx.vue /
import Waterfall from 'vue-waterfall/lib/waterfall'
import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
/
or use ES5 code (vue-waterfall.min.js) :
import { Waterfall, WaterfallSlot } from 'vue-waterfall'
/
export default {
...
components: {
Waterfall,
WaterfallSlot
},
...
}
```
ES5
```js
var Vue = require('vue')
var Waterfall = require('vue-waterfall')
var YourComponent = Vue.extend({
...
components: {
'waterfall': Waterfall.waterfall,
'waterfall-slot': Waterfall.waterfallSlot
},
...
})
```
Browser
```html
```
```js
new Vue({
...
components: {
'waterfall': Waterfall.waterfall,
'waterfall-slot': Waterfall.waterfallSlot
},
...
})
```
HTML structure
```html
v-for="(item, index) in items"
:width="item.width"
:height="item.height"
:order="index"
:key="item.id"
>
<!--
your component
-->
```
Props
waterfall
<thead>
<tr>
<th width="160">Name</th>
<th width="160">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>line</td>
<td><code>v</code></td>
<td><code>v</code> or <code>h</code> . Line direction.</td>
</tr>
<tr>
<td>line-gap</td>
<td>-</td>
<td>Required. The standard space (px) between lines.</td>
</tr>
<tr>
<td>min-line-gap</td>
<td>= line-gap</td>
<td>The minimal space between lines.</td>
</tr>
<tr>
<td>max-line-gap</td>
<td>= line-gap</td>
<td>The maximal space between lines.</td>
</tr>
<tr>
<td>single-max-width</td>
<td>= max-line-gap</td>
<td>The maximal width of slot which is single in horizontal direction.</td>
</tr>
<tr>
<td>fixed-height</td>
<td><code>false</code></td>
<td>Fix slot height when line = <code>v</code> .</td>
</tr>
<tr>
<td>grow</td>
<td>-</td>
<td>Number Array. Slot flex grow factors in horizontal direction when line = <code>v</code> . Ignore <code>*-gap</code> .</td>
</tr>
<tr>
<td>align</td>
<td><code>left</code></td>
<td><code>left</code> or <code>right</code> or <code>center</code> . Alignment.</td>
</tr>
<tr>
<td>auto-resize</td>
<td><code>true</code></td>
<td>Reflow when window size changes.</td>
</tr>
<tr>
<td>interval</td>
<td><code>200</code></td>
<td>The minimal time interval (ms) between reflow actions.</td>
</tr>
<tr>
<td>watch</td>
<td><code>{}</code></td>
<td>Watch something, reflow when it changes.</td>
</tr>
</tbody>
waterfall-slot
<thead>
<tr>
<th width="160">Name</th>
<th width="160">Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>-</td>
<td>Required. The width of slot.</td>
</tr>
<tr>
<td>height</td>
<td>-</td>
<td>Required. The height of slot.</td>
</tr>
<tr>
<td>order</td>
<td><code>0</code></td>
<td>The order of slot, often be set to <code>index</code> in <code>v-for</code> .</td>
</tr>
<tr>
<td>key</td>
<td><code>''</code></td>
<td>The unique identification of slot, required for transition.</td>
</tr>
<tr>
<td>move-class</td>
<td>-</td>
<td>Class for transition. see <a href="https://github.com/vuejs/vue-animated-list" target="_blank">vue-animated-list</a> .</td>
</tr>
</tbody>
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
```js
ON ( 'reflow' ) {
reflow
}
// trigger reflow action: waterfallVm.$emit('reflow')
```
```js
AFTER ( reflow ) {
emit 'reflowed'
}
// waterfallVm.$on('reflowed', () => { console.log('reflowed') })
```
Reactivity
```js
WHEN ( layout property changes ) { /
line, line-gap, etc. /
reflow
}
```
```js
WHEN ( slot changes ) { /
add, remove, etc. /
reflow
}
```
License
Released under the
MIT License.