# vue-waterfall-photo

> ## show ![show](https://raw.githubusercontent.com/SUNbrightness/my-img/master/WeChatdf46e4c89629031d2e0e4da40bd81041.png)

Latest version **1.0.3** (published 2020-07-24) · MIT license · 0 weekly downloads

## Install

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

## 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.3 |
| Published | 2020-07-24 |
| First published | 2020-07-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ysunbrightness |
| Maintainers | sun-brightness |

## Links

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

## Recent versions

- 1.0.3 (latest) — 2020-07-24
- 1.0.2 — 2020-07-24
- 1.0.1 — 2020-07-06
- 1.0.0 — 2020-07-06

## README

# vue-waterfall-photo

## show
![show](https://raw.githubusercontent.com/SUNbrightness/my-img/master/WeChatdf46e4c89629031d2e0e4da40bd81041.png)


## Project setup
```
npm install vue-waterfall-photo -S
```
```
import VueWaterfallPhoto from 'vue-waterfall-photo';
    export default {
        name: "app",
        components: {
            VueWaterfallPhoto
        }
    }
```

## Simple

```
<template>
    <div >
            <vue-waterfall-photo :lineGap="0.5" :grow="3" :initList="imageList">
            </vue-waterfall-photo>
    </div>
</template>
<script>
    import VueWaterfallPhoto from 'vue-waterfall-photo';
    export default {
        name: "app",
        components: {
            VueWaterfallPhoto
        },
        data:function(){
            return {
                imageList:[
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic.jpg",height:300,width:300},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic0.jpg",height:300,width:300},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic1.jpg",height:100,width:100},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic2.jpg",height:100,width:100},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic7.jpg",height:1188,width:1200},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic4.jpg",height:300,width:300},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic5.jpg",height:300,width:300},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic6.jpg",height:300,width:300},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic7.jpg",height:1188,width:1200},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic8.jpg",height:300,width:300},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic9.jpg",height:2315,width:2315},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pavlova.jpg",height:853,width:1280},
                    {src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/test/pic.jpg",height:300,width:300},
                    
                ]
            }
        }
    };
</script>
```

## slot
```
  <vue-waterfall-photo ref="waterfall" :lineGap="0.5" :grow="3" :initList="imageList">
                 <template v-slot="{ item }">
                        <img  :src="'http://'+item.src"></img>
                    </template>
            </vue-waterfall-photo>

```
## performance
```
Don’t change imageList


use
this.$ref.waterfall.addItem({})
this.$ref.waterfall.joinItem([])
```

## initList
```
{
    src:"https://raw.githubusercontent.com/SUNbrightness/my-img/master/WeChatdf46e4c89629031d2e0e4da40bd81041.png",
    height:300,
    width:300,
}
```

## prop
required|Attribute|type| default |explain
---|---|---|---|---
true|initList|Array|[]|初始值
flase|lineGap|Number <100 |1|图片间隔距离
flase|grow|Number|2|列数
flase|dataKey|Object|{height:'height',width:'width',id:'id'}|属性映射

## methods
method|explain
---|---
addItem({})|新增单个数据
joinItem([])|新增一组数据
refresh()|初始化


### If don’t use add method, It’s also true.
### use add method is improve performance.

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