vue-waterfall | 一款基于vuejs的瀑布流布局组件

vue waterfall是一款基于vuejs的瀑布流布局组件。它可以设置为垂直瀑布流布局和水平瀑布流布局。使用简单，可以快速集成到您的应用之中。

使用方法

安装

如果您想使用vue waterfall瀑布流布局组件，首先您需要安装它，命令如下：

npm install --save vue-waterfall
		

使用

在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
  },
  ...
})
		

浏览器中使用：

<script src="path/to/vue/vue.min.js"></script>
<script src="path/to/vue-waterfall/vue-waterfall.min.js"></script>

new Vue({
  ...
  components: {
    'waterfall': Waterfall.waterfall,
    'waterfall-slot': Waterfall.waterfallSlot
  },
  ...
})
		

HTML结构

<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>			
		

配置参数

• line: 线条的方向，可以是水平（h）或垂直（v）。
• line-gap: 线条之间的标准空间（以像素为单位）。
• min-line-gap: 线条之间的最小间隔，与line-gap相等。
• max-line-gap: 线条之间的最大间隔，与line-gap相等。
• single-max-width: 单个插槽在水平方向上的最大宽度。
• fixed-height: 当line=h时，是否固定插槽的高度。
• grow: 数组中每个插槽在水平方向上的伸缩因子，当line=h时忽略*-gap。
• align: 对齐方式，可以是左对齐（left）、右对齐（right）或居中对齐（center）。
• auto-resize: 是否在窗口大小更改时重新调整布局。
• interval: 重新调整布局的最小时间间隔（以毫秒为单位）。
• watch: 监视某些内容，当其发生变化时重新调整布局。

插槽

• width: 插槽的宽度。
• height: 插槽的高度。
• order: 插槽的顺序，通常设置为v-for中的索引。
• key: 插槽的唯一标识符，用于过渡效果。
• move-class: 用于过渡效果的类，参见vue-animated-list。

github网址：https://github.com/MopTym/vue-waterfall