waterflow.js

waterflow.js

A library that implements waterfall flow

It can works with React, Vue, etc

Install

Demo

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