https://github.com/kricsleo/waterfall-flow

🧱 A dynamic and flexible waterfall component for vue2.
https://github.com/kricsleo/waterfall-flow

vue waterfall

Last synced: 24 days ago
JSON representation

🧱 A dynamic and flexible waterfall component for vue2.

• Host: GitHub
• URL: https://github.com/kricsleo/waterfall-flow
• Owner: kricsleo
• Created: 2021-08-12T07:59:50.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2024-02-26T02:08:50.000Z (9 months ago)
• Last Synced: 2024-10-05T10:36:04.487Z (about 1 month ago)
• Topics: vue, waterfall
• Language: Vue
• Homepage: https://stackblitz.com/edit/vue2-vue-cli-dcukzb?file=components%2FPhotoList.vue
• Size: 96.4 MB
• Stars: 7
• Watchers: 1
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Waterfall component for Vue 2




  

    

  





  



## 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 the most common `absolute` layout

## Getting Started

### Install

```bash

# npm install @kricsleo/waterfall-flow

yarn add @kricsleo/waterfall-flow

```

### Import Style

```typescript

// 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';

```

### Usage

```vue

  

  

  

  

  ...

```

## API

| Prop    | Type   | Required | Default | Description                 |

|-----------|--------|----------|---------|-----------------------------|

| cols      | number | ❌    | 2       | Number of columns.          |

| deviation | number | ❌    | 1       | Deviation of columns in pixel.         |

| laneClass | string | ❌    | -       | Class name for each column. |

## Escape Pod

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