vue-stack-grid

Vue components for stack grid/waterfall/Pinterest type layouts. Inspired by react-stack-grid.

Demo

Coming soon. Please see react-stack-grid for an indication of the features.

Installation

NPM:

npm install --save vue-stack-grid

Usage

Basic

<template>
  <div>
    <stack :column-min-width="320" :gutter-width="8" :gutter-height="8">
      <stack-item v-for="(item, i) in items" :key="i">
        {{ item.someContent }}
      </stack-item>
    </stack>
  </div>
</template>

<script>
  import { Stack, StackItem } from 'vue-stack-grid';

  export default {
    components: { Stack, StackItem }
  }
</script>

With animation

For animation, simply add style="transition: transform 300ms" to the stack-items.

With images

If images appear anywhere in the stack items, apply the monitor-images-loaded prop to the stack component.

Props

Stack

| Name | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | column-min-width | Number | Yes | | The minimum width of columns. If the columns do not fit into the container anymore, the number of columns is reduced. | | gutter-width | Number | No | 0 | The space between columns in pixels. | | gutter-height | Number | No | 0 | The space between items in the same column. | | monitor-images-loaded | Boolean | No | false | If true, reflow once all images are loaded using vue-images-loaded. This is recommended if any of the stack items contain images, as the images might not be loaded yet when the initial positions and sizes are computed. |

Note that gutter-width and gutter-height can also be replaced by adding margin/padding to the stack items.

Examples

Clone the repository and run: npm run examples

Future plans

• Handle adding/removing items.
• Add build system.
• Add demo.
• Please make feature requests if you have any!