瀑布流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 .