fp-waterfall

基于CSS和JS实现瀑布流布局，自适应宽度

A waterfall layout component based on CSS and JS, adaptive width

Usage

1. install

pnpm install fp-waterfall

2. import

import Waterfall from 'fp-waterfall'

3. use

<ul id="waterfall">
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
  <li><img src="" alt=""></li>
</ul>

const waterfall = new Waterfall({
  wrapper: "#waterfall",
  columnWidth: 200,
  gap: 12,
  delay: 100
})

options

| option | type | default | desc | required | | --- | --- | --- | --- | --- | | wrapper | string | "" | selector of waterfall container | √ | | columnWidth | number | 200 | width of each column | - | | gap | number | 0 | gap between each column | - | | delay | number | 100 | delay time in ms | - |