# vue-waterfall-adaptive

> 基于 vue.js 的瀑布流组件，自适应高度，响应式

Latest version **1.1.6** (published 2020-06-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-waterfall-adaptive
pnpm add vue-waterfall-adaptive
yarn add vue-waterfall-adaptive
bun add vue-waterfall-adaptive
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.6 |
| Published | 2020-06-18 |
| First published | 2019-03-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 51 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 13 |
| Author | YaoChangTueQueDuan |
| Maintainers | gengyujian |
| Keywords | waterfall, vue, adaptive, layout |

## Links

- npm: https://www.npmjs.com/package/vue-waterfall-adaptive
- Repository: https://github.com/geng452654716/vue-waterfall
- Homepage: https://github.com/geng452654716/vue-waterfall.git
- Issues: https://github.com/geng452654716/vue-waterfall/issues
- npm.io page: https://npm.io/package/vue-waterfall-adaptive

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [lodash](https://npm.io/package/lodash.md) ^4.17.11
- [vue-router](https://npm.io/package/vue-router.md) ^3.3.4
- [@vue/eslint-config-standard](https://npm.io/package/@vue/eslint-config-standard.md) ^4.0.0

## Recent versions

- 1.1.6 (latest) — 2020-06-18
- 1.1.5 — 2020-06-18
- 1.1.4 — 2020-05-19
- 1.1.3 — 2019-07-24
- 1.1.2 — 2019-06-11
- 1.1.1 — 2019-03-27
- 1.1.0 — 2019-03-27
- 1.0.0 — 2019-03-26

## README

# vue-waterfall-adaptive

[![npm](https://img.shields.io/npm/v/vue-waterfall-adaptive.svg)](https://www.npmjs.com/package/vue-waterfall-adaptive)
[![npm](https://img.shields.io/npm/dt/vue-waterfall-adaptive.svg)](https://www.npmjs.com/package/vue-waterfall-adaptive)
[![npm](https://img.shields.io/npm/l/vue-waterfall-adaptive.svg)](https://www.npmjs.com/package/vue-waterfall-adaptive)

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

[demo](https://geng452654716.github.io/vue-waterfall/dist/)

## 安装

### 安装 vue-waterfall-adaptive

```sh
npm install vue-waterfall-adaptive
```

### 加载 vue-waterfall-adaptive 模块

支持 ES6 与 commonjs 的加载方式

```js
// 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`

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

## 使用

```html
<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](https://github.com/geng452654716)

---
_Source: https://npm.io/package/vue-waterfall-adaptive · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._