# vue-simple-waterfall

> A simple waterfall layout component for Vue.js

Latest version **1.0.0** (published 2019-04-17) · MIT license · 0 weekly downloads

## Install

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

## 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.0.0 |
| Published | 2019-04-17 |
| First published | 2019-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 340.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Amos Xu |
| Maintainers | chengcheng0722 |
| Keywords | waterfall, vue |

## Links

- npm: https://www.npmjs.com/package/vue-simple-waterfall
- Repository: https://github.com/AmosXu/vue-simple-waterfall
- Homepage: https://github.com/AmosXu/vue-simple-waterfall#readme
- Issues: https://github.com/AmosXu/vue-simple-waterfall/issues
- npm.io page: https://npm.io/package/vue-simple-waterfall

## Recent versions

- 1.0.0 (latest) — 2019-04-17

## README

# vue-simple-waterfall
### English | [中文](./chineseREADME.md)
I made some changes to resolve some problem and make it easily by vue-waterfall. vue-waterfall link is (https://www.npmjs.com/package/vue-waterfall)

# preview image
![preview](https://raw.githubusercontent.com/AmosXu/vue-simple-waterfall/master/preview.png)
## Installation

  ```shell

npm install --save vue-simple-waterfall

```
### Import
#### ES6
```js
/* in xxx.vue */
import { Waterfall, WaterfallSlot } from  'vue-simple-waterfall'

export default {
...
components: {
  Waterfall,
  WaterfallSlot
},
...
}
```
### HTML structure

```html
<waterfall :line-gap="10" :item-width="160" :watch="imageList">
  <waterfall-slot
    v-for="(item, index) in  imageList" 
   :height="item.height  *  160  /  item.width"
   :order="index"
   :key="index"
  >
  <!--
    your component
  -->
  </waterfall-slot>
</waterfall>
```
## Props

### waterfall
| Name | Default | Description |
| :------| ------: | :------: |
| line-gap | - | Required. The standard space (px) between lines |
| item-width | - | Required. The width (px) of each item. |
| watch | [] | Watch something, reflow when it changes. |
| auto-resize | true | Reflow when window size changes. |


### waterfall-slot
| Name | Default | Description |
| :------| ------: | :------: |
| height | - | Required. The height of slot. |
| order | 0 | The order of slot, often be set to <code>index</code> in <code>v-for</code> . |
| key | <code>''</code> | The unique identification of slot, required for transition. |

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