waterflow.js/README.md

[Demo](http://alex-xueyao.gitee.io/v3pro/#/laolai)

> ## waterflow.js
> ### A library that implements waterfall flow
> ### It can works with React, Vue, etc

###### Install

[Demo](http://alex-xueyao.gitee.io/v3pro/#/laolai)

```bash
npm install waterflow.js
yarn add waterflow.js
```

* one
<img src="https://alex-xueyao.gitee.io/static/one.jpg"/>

* two
<img src="https://alex-xueyao.gitee.io/static/two.jpg" />

###### Usage

```html

<style>
  .container {
    width: 982px;
  }

  .item {
    width: 314px;
  }
</style>

<div class="container">
  <div class="item">
    <img src="./1.png"/>
    One
  </div>
  <div class="item">
    <img src="./2.png"/>
    Two
  </div>
  <div class="item">
    <img src="./3.png"/>
    Three ...
  </div>
</div>
```

```javascript
es6

import waterfall from 'waterflow.js'

const container = document.querySelector('.container')
waterfall(container, 314, 20)
```

```javascript
script

< script
src = "node_modules/waterflow.js/lib/umd.js" > < /script>
const container = document.querySelector('.container')
waterfall(container, 314, 20)
```

```javascript
commonjs

const waterfall = require('waterflow.js/lib/cjs')

const container = document.querySelector('.container')
waterfall(container, 314, 20)
```

```javascript
import waterfall from 'waterflow.js'

render()
{
	return (
		<div ref={ el => {
			this.container = el
		} }>
			<div>
				<img src="..."/>
				<span>...</span>
			</div>
			<div>
				<img src="..."/>
				<span>...</span>
			</div>
			<div>
				<img src="..."/>
				<span>...</span>
			</div>
			<div>
				<img src="..."/>
				<div>...
					<span>...</span>
				</div>
			</div>
		</div>
	)
}
componentDidMount()
{
	waterfall(this.container, 314, 25)
}
componentDidUpdate()
{
	waterfall(this.container, 314, 25) // if necessary
}

if you use
hook, you
can
use
waterfall in useEffect
...
```

```markdown
### waterfall(container, width, gap, bool, time_gap)

### container: Dom

### width: child Width (number),

notice: (width) This value can be passed either by using the width defined in
CSS or by dynamically fetching data from javascript

### gap: gap between childrens (number)

### bool: which ways between one and two

### time_gap: (number) if you use image, time_gap is the time between image load
```

> The waterflow.js library exposes a function that takes three arguments:
>
> ### first argument: container (When using React or Vue, pass in a ref or a DOM depending on the class name, etc.)
>
> ### second: width The width of a single element in the container (type number)
>
> ### third: gap The space between containers