# water-fall3

> 基于vue3开发的瀑布流组件，解决前台流式布局问题，图片加载采用的是预加载方式。

Latest version **0.0.3** (published 2023-07-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install water-fall3
pnpm add water-fall3
yarn add water-fall3
bun add water-fall3
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-07-13 |
| First published | 2023-06-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lycarrot |
| Maintainers | lycarrot |
| Keywords | waterFall, rollup, vue3, typescript |

## Links

- npm: https://www.npmjs.com/package/water-fall3
- npm.io page: https://npm.io/package/water-fall3

## Dependencies (1)

- [@types/vue](https://npm.io/package/@types/vue.md) ^2.0.0

## 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.0.3 (latest) — 2023-07-13
- 0.0.2 — 2023-06-17
- 0.0.1 — 2023-06-06
- 0.0.0 — 2023-06-06

## README

# waterFall3 瀑布流组件

### 介绍
基于vue3+typesscript+rollup构建的瀑布流列表组件，在pc端能够根据屏幕宽度做自适应变化调整。

### 效果查看地址
[http://waterfall3.top/](http://139.9.217.126/)

### 安装
```
npm i water-fall3 --save-dev 
或
yarn install water-fall3 --save-dev
```

### 引入
全局注册组件

```js
import { createApp } from 'vue';
import waterFall3 from 'water-fall3';

const app = createApp();
app.use(waterFall3);
```

局部注册组件
```js
<script setup lang="ts">
import  waterFall3  from "../../src/";
</script>
<template>
<water-fall3></water-fall3> 
</template>
```


## 代码演示

### 基础用法
```html
  <water-fall3
    ref="waterfall"
    :lists="lists"
    @onBottom="getLists"
    @click="clickFn"
    @imgError="imgErrorFn"
  >
  </water-fall3>
```
```js
<script setup lang="ts">
import  waterFall3  from "../../src/";
import axios from "axios";
import { ref, onMounted } from "vue";
let lists = ref([]);
let waterfall = ref<HTMLElement | null>();
let page =ref<number>(0)
const getLists = () => {
  axios
    .get("./src/mock/list.json" )
    .then((res) => {
      // 加载到底部数据了
      if (page.value.length>10) {
       waterfall.value.onFinish();
        waterfall;
        return;
      }
      lists.value = lists.value.concat(res.data);
      page.value++
    });
};

getLists();
const clickFn = ({ item,index,  isTapImg }) => {
  console.log(item,index,  isTapImg)
};

const imgErrorFn = (imgItem) => {
  console.log("图片加载错误", imgItem);
};
</script>
```

## API


### CouponList Props

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| width | 容器宽度 | _number_ | - |
| height | 容器高度 | _number_ | - |
| lists | 列表数据 | _array_ | [] |
| itemWidth | 每一项列表的宽度 | _number_ | 240 |
| bottomOffset | 滚动条与底部距离小于 bottomOffset 时触发新的加载 | _number_ | 50 |
| maxCols | 在当前容器宽度内最多可以容纳多少列 | _number_ | 5 |
| horizontalGap | 水平列表项之间的间距 | _number_ | 10 |
| verticalGap | 纵向列表项之间的间距 | _number_ | 10 |
| srcKey | 列表项显示图片的key字段 | _string_ | src |
| offsetBottom | 列表项显示图片的key字段 | _string_ | src |
| srcKey | 列表项显示图片的key字段 | _string_ | src |
| finishGap | 列表和滚动到底部文字距离 | _number_ | 20 |



###  Events

| 事件名   | 说明           | 回调参数                |
| -------- | -------------- | ----------------------- |
| onBottom   | 与底部距离小于 bottomOffset 时触发该事件 | - |
| click | 点击列表项触发 | item:列表数据;index:列表项:isTapImg:点击的是图片还是整个列表项;           |

### Slots

| 名称                           | 说明                 |
| ------------------------------ | -------------------- |
| loading       | 加载数据动画       |
| head | 列表头部项内容 |
| default | 列表项默认描述内容 |
| finish | 列表项底部描述尼尔 |

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