正文

瀑布流vue-waterfall的高度设置

IP云
IP云V管理员/9 阅读
07/23
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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

namedefaultdescription
linevv or h . Line direction.
line-gap-Required. The standard space (px) between lines.
min-line-gap= line-gapThe minimal space between lines.
max-line-gap= line-gapThe maximal space between lines.
single-max-width= max-line-gapThe maximal width of slot which is single in horizontal direction.
fixed-heightfalseFix slot height when line = v .
grow-Number Array. Slot flex grow factors in horizontal direction when line = v . Ignore *-gap .
alignleftleft or right or center . Alignment.
auto-resizetrueReflow when window size changes.
interval200The minimal time interval (ms) between reflow actions.
watch{}Watch something, reflow when it changes.

waterfall-slot

namedefaultdescription
width-Required. The width of slot.
height-Required. The height of slot.
order0The 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 .