最近用vue做项目，用到了瀑布流vue-waterfall，其中遇到高度的设置问题，大概介绍下，希望可以帮到一些人
1、安装
npm install --save vue-waterfall
2、引入
ES6
* 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
var Vue = require(‘vue‘)
var Waterfall = require(‘vue-waterfall‘)
var YourComponent = Vue.extend({
...
components: {
‘waterfall‘: Waterfall.waterfall,
‘waterfall-slot‘: Waterfall.waterfallSlot
},
...
})
3、Browser
<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-waterfall/vue-waterfall.min.js"></script>
or
new Vue({
...
components: {
‘waterfall‘: Waterfall.waterfall,
‘waterfall-slot‘: Waterfall.waterfallSlot
},
...
})
4、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>
5、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 . |
原文地址：https://www.cnblogs.com/liangzhixiaolaohu/p/8311475.html