Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/MopTym/vue-waterfall
A waterfall layout component for Vue.js
https://github.com/MopTym/vue-waterfall
Last synced: about 2 months ago
JSON representation
A waterfall layout component for Vue.js
- Host: GitHub
- URL: https://github.com/MopTym/vue-waterfall
- Owner: MopTym
- License: mit
- Created: 2016-02-15T06:59:06.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-19T08:41:58.000Z (almost 7 years ago)
- Last Synced: 2024-05-12T11:04:05.848Z (7 months ago)
- Language: Vue
- Size: 396 KB
- Stars: 2,144
- Watchers: 43
- Forks: 258
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-cn - **vue-waterfall ★206**
- stars - MopTym/vue-waterfall
- awesome-vue - vue-waterfall - waterfall?style=social) - Vue.js的瀑布布局组件 (UI组件)
- awesome-github-vue - vue-waterfall - Vue.js的瀑布布局组件 (UI组件)
- awesome-vue - vue-waterfall - Vue.js的瀑布布局组件 (UI组件)
- awesome-github-vue - vue-waterfall - Vue.js的瀑布布局组件 (UI组件)
- awesome - vue-waterfall - Vue.js的瀑布布局组件 (UI组件)
README
# vue-waterfall
[](https://travis-ci.org/MopTym/vue-waterfall)
[](https://www.npmjs.com/package/vue-waterfall)
[](LICENSE)
A waterfall layout component for Vue.js .
Branch [0.x (version 0.x.x)](https://github.com/MopTym/vue-waterfall/tree/0.x) is compatible with Vue 1 .
## Demo
- [Vertical line](http://app.moptym.com/vue-waterfall/demo/vertical-line.html)
- [Horizontal line](http://app.moptym.com/vue-waterfall/demo/horizontal-line.html)
- [Vertical line with grow](http://app.moptym.com/vue-waterfall/demo/vertical-line-with-grow.html)
## Installation
```shell
npm install --save vue-waterfall
```
## Usage
Vue-waterfall is a [UMD](https://github.com/umdjs/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
```
## 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](https://github.com/vuejs/vue-animated-list) , vue-waterfall supports moving elements with `translate` in transition, click on the [demo](http://app.moptym.com/vue-waterfall/demo/vertical-line.html) page to see it.
vue-waterfall has not supported `` in Vue 2 ( [#10](https://github.com/MopTym/vue-waterfall/issues/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) License.