# vue-waterfall-ex

> vue瀑布流组件

Latest version **0.1.17** (published 2021-02-26) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.17 |
| Published | 2021-02-26 |
| First published | 2020-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 61.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zeronofreya |
| Maintainers | zeronofreya |
| Keywords | vue, vuejs, typescript, vuecli4.x, waterfall |

## Links

- npm: https://www.npmjs.com/package/vue-waterfall-ex
- Repository: https://github.com/ZeronoFreya/vue-waterfall-ex
- Issues: https://github.com/ZeronoFreya/vue-waterfall-ex/issues
- npm.io page: https://npm.io/package/vue-waterfall-ex

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.1.17 (latest) — 2021-02-26
- 0.1.16 — 2021-02-17
- 0.1.15 — 2021-02-17
- 0.1.14 — 2021-02-16
- 0.1.13 — 2021-02-12
- 0.1.12 — 2021-02-12
- 0.1.11 — 2020-08-29
- 0.1.10 — 2020-08-29
- 0.1.9 — 2020-08-29
- 0.1.8 — 2020-08-20
- 0.1.7 — 2020-08-13
- 0.1.6 — 2020-08-13
- 0.1.5 — 2020-08-08
- 0.1.4 — 2020-08-08
- 0.1.3 — 2020-08-07
- … 3 more at https://npm.io/package/vue-waterfall-ex/versions

## README

# vue-waterfall-ex

## 说明
参考
* [vue-virtual-collection](https://zhuanlan.zhihu.com/p/34380557)
* [vue-waterfall-easy](https://lfyfly.github.io/vue-waterfall-easy/demo/#/)

**vue-virtual-collection** 实现了局部渲染和DOM回收，不会渲染全部数据，而是把当前 viewport 中展示的 Cell 渲染出来，所以性能上比渲染全量数据要快太多了（摘自官网）。
**vue-waterfall-easy** 则封装了瀑布流组件，使用起来十分容易。
以上两个是十分优秀的瀑布流相关组件，本着学习的态度观摩了下源码，遗憾的是并没有发现结合两者的办法。

所以本人就拆出了源码中的核心部分并重组，基本实现了组件的合并。
当然，由于本人能力有限，会有一些考虑不当的地方，欢迎指出。

## 安装

```
yarn add vue-waterfall-ex
```
## 使用方法

### 全局引入无效，待研究

```
// main.js

import VueWaterfallEx from 'vue-waterfall-ex';
Vue.use(VueWaterfallEx)
```


### 在组件中使用

```javascript
<template lang="pug">
  .home
    vue-waterfall-ex(
      :imgsArr="imgsArr"    // 瀑布流数据 —— 必填
      :maxCols="3"          // 最多列数
      :imgWidth="300"       // 每列的基础宽度
      :moreHeight="60"      // 额外高度
      srcKey="preview"      // 自定义图片地址的key值
      @scrollReachBottom="getData"  // 滚动到底部获取更多数据
    )
      template(v-slot="{data}")
        .img-box            // 自定义内容
          .img-wraper(v-if="data.preview")
            img(:src="data.preview")
          .ctrl-box
            .xxx {{data.id}}
</template>
<script>
import VueWaterfallEx from "vue-waterfall-ex"
export default{
    data() {
      return {
        imgsArr: []
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.$axios.get("图片地址接口").then(res => {
          res = res.data;
          let imgList = [];
          res.forEach(item => {
            imgList.push({
              id: item.id,
              preview: item.preview_url,      // 必要，图片地址，key值可自定义，默认为src
              width: parseInt(item.width),    // 暂时必要，图片真实宽度
              height: parseInt(item.height)   // 暂时必要，图片真实高度
            });
          });
          this.imgsArr = imgList;
        }).catch(err => {
          console.log(err);
        });
      }
    },
    components: {
      VueWaterfallEx
    }
}
</script>
<style lang="scss" scoped>
.home {
  width: 100vw;             // 容器的宽
  height: 100vh;            // 容器的高
  .img-box {
    overflow: hidden;
    width: 100%;
    height: 100%;
    .img-wraper {
      width: 100%;
      height: auto;
      img {
        width: 100%;
        height: auto;
        border-radius: 16px;
        display: block;
      }
    }
    .ctrl-box {
      width: 100%;
      height: 60px;
      position: relative;
      padding: 10px;
    }
  }
}
</style>
```
## Props

| props               | type   | default | 说明                                  |
| :------------------ | :----- | :------ | :----------------------------------- |
| gap                 | Number | 20      | 图片间距                              |
| height              | Number | -       | 容器高度（px）不传时父元素必须具有height |
| imgsArr             | Array  | 必传    | 瀑布流数据                             |
| imgWidth            | Number | 300     | 每列的基础宽度（px）                   |
| maxCols             | Number | 0       | 最多列数，0为不限                      |
| moreHeight          | Number | 0       | 额外的高度（px）                       |
| reachBottomDistance | Number | 20      | 滚动触底距离（px），触发加载新图片       |
| sectionSize         | Number | 600     |                                      |
| srcKey              | String | src     | 自定义图片地址的key值                  |
| width               | Number | -       | 容器宽度（px）                         |

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