vue-waterfall-adaptive

概述

vue 瀑布流组件，高度自适应，响应式，支持自定义布局，支持多图模式

demo

安装

安装 vue-waterfall-adaptive

npm install vue-waterfall-adaptive

加载 vue-waterfall-adaptive 模块

支持 ES6 与 commonjs 的加载方式

// ES6
import { waterfall, waterfallSilde } from 'vue-waterfall-adaptive';

// commonjs
const waterfall = require("vue-waterfall-adaptive").waterfall;
const waterfallSilde = require("vue-waterfall-adaptive").waterfallSilde;

也可以在 html 文件中使用 script 标签引入脚本，访问全局变量 vueWaterfallAdaptive

<script src="lib/vue-waterfall-adaptive.js"></script>

使用

<waterfall>
  <waterfallSilde>item1</waterfallSilde>
  <waterfallSilde>item2</waterfallSilde>
  <waterfallSilde>item3</waterfallSilde>
  ...
</waterfall>

选项

waterfall 属性

| 属性 | 描述 | 默认值 | 类型 | 可选项 | | --------------- | ------------------------------------------------------------- | ----------- | --------- | ------------------------ | | top | 初始 top 值 | 0 | Number | - | | top-interval | 瀑布流布局上下间距 | 0 | Number | - | | left-interval | 瀑布流布局左右间距 | 0 | Number | - | | width | 宽度,组件会根据宽度自动分配每行个数 | 320 | Number | - | | loading | 是否显示加载中的菊花图 | false | Boolean | - | | loading-color | 菊花图的颜色 | #969799 | String | - | | offset | 滚动条距离底部小于 offset 时触发 load 事件 | 200 | Number | - | | finished | 是否已加载完成，加载完成后不再触发 load 事件 | false | Boolean | - | | finished-txt | 加载完成后的提示文案,如不需要,设置空字符串 | 没有更多了~ | String | - |

waterfall 事件

| 事件名 | 说明 | | ------- | -----------------------------------------------------------| | load | 滚动条与底部距离小于 offset 时触发 |

waterfall 方法

| 方法名 | 说明 | | ------- | -----------------------------------------------------------| | reset | 重置瀑布流布局(此方法只重置组件内部高度于位置,外部状态需自己重置,如 finished 属性,页码,数据等)|

waterfall 插槽

| 方法名 | 说明 | | ------- | -----------------------------------------------------------| | default | 默认插槽,插入 waterfallSilde 组件 | | loading | 自定义 loading 效果 |

waterfallSilde 属性

| 属性 | 描述 | 默认值 | 类型 | | ------- | ----------------------------------------------------------- | ----------- | --------- | | prefetch | 是否需要预加载，在图片不定高时需要设置为 true，会预加载所有图片。 预加载时为了保证数据，会阻塞后续渲染 | false | Boolean| | imgs | 需要预加载的图片数组，数组每一项为图片 url | [ ] | string[ ] |

许可

MIT@geng452654716