# waterfall-flow-js

> js实现的瀑布流插件

Latest version **1.0.12** (published 2023-09-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install waterfall-flow-js
pnpm add waterfall-flow-js
yarn add waterfall-flow-js
bun add waterfall-flow-js
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.12 |
| Published | 2023-09-25 |
| First published | 2023-09-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | lsk-at-npm liushengkai95@gmail.com |
| Maintainers | lsk-at-npm |
| Keywords | javascript, js, waterfall |

## Links

- npm: https://www.npmjs.com/package/waterfall-flow-js
- Repository: https://gitee.com/lsk_ciao/waterfall-flow
- npm.io page: https://npm.io/package/waterfall-flow-js

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.12 (latest) — 2023-09-25
- 1.0.11 — 2023-09-24
- 1.0.10 — 2023-09-24
- 1.0.9 — 2023-09-24
- 1.0.8 — 2023-09-24
- 1.0.7 — 2023-09-24
- 1.0.6 — 2023-09-24
- 1.0.5 — 2023-09-24
- 1.0.4 — 2023-09-24
- 1.0.3 — 2023-09-24
- 1.0.2 — 2023-09-24
- 1.0.1 — 2023-09-24
- 1.0.0 — 2023-09-24

## README

# waterfall-flow-js

#### 安装
```
npm i waterfall-flow-js
```

#### 使用说明

```
import waterfall from 'waterfall-flow-js'

// 元素加载时使用

const flow = waterfall(el, imgs, imgWidth, options)

flow.appendData(imgs) // 需要追加数据时调用

flow.unResize() // 停止元素尺寸监听时调用

```
##### attr
| 参数      | 类型 | 默认值 | 说明 |
| ----------- | ----------- | ----------- | ----------- |
| el      | HTMLElement       | --       | 该dom元素会作为图片的渲染容器       |
| imgs   | Array<string>        | --        | 一个包含图片url地址的数组， 所有图片将被渲染到容器中并以瀑布流排列        |
| imgWidth   | number       | --        | 图片的宽度，必须要执行，会根据执行宽度去分列，注意，图片的宽度并不一定会等于该值。        |
| options   | Object        | --        | 详细说明请参考（options）        |
##### methods
| 名称      | 参数      | 说明 |
| ----------- | ----------- | ----------- |
| appendData      | 同imgs     | 追加数据       |
| unResize   | --       | 停止对元素的尺度变化监听        |
##### options
| 属性      | 类型 | 说明 | 默认值 |
| ----------- | ----------- | ----------- | ----------- |
| resize      | boolean       | 是否监听元素的尺寸变化，如果监听了可使用 unResize 函数停止监听       | true |
| gap   | number        | 图片之间的间距，会作为padding给到元素        | 6        |
| autoFill   | boolean        | 是否使得图片等同列宽，建议使用true， 可极大提升美观性        | true        |
| onload   | Function        | 该函数会在图片渲染出来后执行        | -- |

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request

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