Preview

Features

• Support Vue 2
• Support dynamic and unlimited columns
• Support different kinds of children within the same waterfall
• Auto layout without specifying width or height of children
• Using natural document flow which is more reliable than absolute layout

Getting Started

Install

# npm install @kricsleo/waterfall-flow
yarn add @kricsleo/waterfall-flow

Import Style

// style goes here, I provide the minium style (very few) to make it work,
// you can DIY the style yourself.
import '@kricsleo/waterfall-flow/dist/WaterfallFlow.css';

Use

<waterfall-flow>
  <your-comp v-for="item in list" :key="item.key" />
</waterfall-flow>

<waterfall-flow :cols="2">
  <your-comp-a />
  <your-comp-b />
  <your-comp-c />
  ...
</waterfall-flow>

Apis

| Option | Type | Required | Default | Description | |-----------|--------|----------|---------|-----------------------------| | cols | number | false | 2 | Number of columns. | | diviation | number | false | 1 | Diviation of pixel. | | laneClass | string | false | - | Class name for each column. |

Escape Pod

In case you want to layout all items yourself, you can call layout(true) by waterfall-flow instance, like this.$refs.waterfall.layout(true), then all items will be re-layout.