vue2-waterfall

An AutoHeight Waterfall Component For Vue2.

View demo Download Source

Install

Install vue2-waterfall

npm install vue2-waterfall
Sh

Import vue2-waterfall

ES6/commonjs import style is supported.

// ES6
import {Waterfall, WaterfallItem} from 'vue2-waterfall';

// commonjs
const Waterfall = require("vue2-waterfall").Waterfall;
const WaterfallItem = require("vue2-waterfall").WaterfallItem;
Js

or link as a script in an html file and access global variable Vue2Waterfall.

<script src="dist/vue2-waterfall.js"></script>
Js

Usage

<Waterfall>
  <WaterfallItem>item1</WaterfallItem>
  <WaterfallItem>item2</WaterfallItem>
  <WaterfallItem>item3</WaterfallItem>
  ...
</Waterfall>
HTML

options

Waterfall Attributes

Option Description default type acceptable values
gutterWidth the waterfall brick element horizontal gutter 0 Number -
gutterHeight the waterfall brick element vertical gutter 0 Number -
resizable triggers layout when browser window is resized true Boolean 'true' 'false'
align Alignment 'center' String 'left' 'center' 'right'
fixWidth fix the waterfall component width - Number -
minCol min columns 1 Number -
maxCol max column - Number -
percent use Fluid layout, ignore waterfallitem width. such as [1, 1] - Array -

WaterfallItem Attributes

Option Description default type
order The order of waterfallItem, often be set to index in v-for - Number
width The width of waterfallItem 150 Number

Events

Option Description
rendered the waterfall component is rendered

GitHub

PLDaily/vue2-waterfall

9624

😁 An AutoHeight Waterfall Component For Vue2 — Read More

Latest commit to the 3.0 branch on 12-24-2021
Download as zip