@rguanghui/vue2-waterfall

vue2-waterfall

Overview

An AutoHeight Waterfall Component For Vue2

Install

npm install @rguanghui/vue2-waterfall

Usage

import { Waterfall, WaterfallItem } from 'vue2-waterfall'

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

See the source code to get the complete example.

options

Waterfall Attributes

Option	Description	default	type
gutterWidth	the waterfall brick element horizontal gutter	10	Number
gutterHeight	the waterfall brick element vertical gutter	10	Number
resizable	triggers layout when browser window is resized	true	Boolean
percent	use Fluid layout. such as [1, 1]	-	Array

WaterfallItem Attributes

Option	Description	default	type
emitEvent	emit an event when the component rendered complete by yourself	-	String

Note: the effect of the emitEvent is to let code know how height is this component. in some case(such as async component or has child component to render), we don't know when to get the final height in the browser. so you may need to actively emit an event to help get the correct dom tree.