瀑布流vue-waterfall的高度设置

最近用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>

 

在这一步有个问题，当需求是瀑布流图片的下面加上文字，用户名之类的内容情况下（如小红书），高度的设置就会受限制，下面的内容就不太容易展示出来。如果在高度的后面加上一个数值比如 height="item.height+100" ,这样也会有问题，当图片的宽度不够瀑布流宽的时候，比如图片宽50，放到瀑布流宽100的区域内，它会把宽度乘以2，高度也乘以2，这样图片下面就会空出很多空白，显然是不可取的。这个时候可以在后面加上宽度的二分之一或者三分之一，这个自己看着来，如  height="item.height+item.width*0.3" 可以解决。但是这个办法并不完美，下面空出的高度还会有小的差别，而且高度不能自适应。有什么好的办法，请大神赐教

 

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 .