1.0.53 • Published 2 years ago
waterflow.js v1.0.53
waterflow.js
A library that implements waterfall flow
It can works with React, Vue, etc
Install
npm install waterflow.js
yarn add waterflow.js
one
two
Usage
<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>
es6
import waterfall from 'waterflow.js'
const container = document.querySelector('.container')
waterfall(container, 314, 20)
script
< script
src = "node_modules/waterflow.js/lib/umd.js" > < /script>
const container = document.querySelector('.container')
waterfall(container, 314, 20)
commonjs
const waterfall = require('waterflow.js/lib/cjs')
const container = document.querySelector('.container')
waterfall(container, 314, 20)
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
...
### 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
1.0.48
2 years ago
1.0.49
2 years ago
1.0.51
2 years ago
1.0.50
2 years ago
1.0.53
2 years ago
1.0.52
2 years ago
1.0.44
2 years ago
1.0.43
2 years ago
1.0.47
2 years ago
1.0.46
2 years ago
1.0.45
2 years ago
1.0.42
2 years ago
1.0.40
3 years ago
1.0.41
3 years ago
1.0.39
3 years ago
1.0.38
3 years ago
1.0.37
3 years ago
1.0.36
3 years ago
1.0.35
3 years ago
1.0.34
3 years ago
1.0.33
3 years ago
1.0.32
3 years ago
1.0.31
3 years ago
1.0.30
3 years ago
1.0.28
3 years ago
1.0.26
3 years ago
1.0.25
3 years ago
1.0.24
3 years ago
1.0.23
3 years ago
1.0.21
3 years ago
1.0.20
3 years ago
1.0.18
3 years ago
1.0.17
3 years ago
1.0.16
3 years ago
1.0.13
3 years ago
1.0.10
3 years ago
1.0.9
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.2
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago