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!