├── .gitignore
├── README.md
├── bin
    └── examples.js
├── examples
    ├── .gitkeep
    └── simple
    │   ├── App.vue
    │   └── index.js
├── index.js
├── package-lock.json
├── package.json
└── src
    ├── Stack.vue
    └── StackItem.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-stack-grid
 2 | 
 3 | Vue components for stack grid/waterfall/Pinterest type layouts. Inspired by [react-stack-grid](https://github.com/tsuyoshiwada/react-stack-grid).
 4 | 
 5 | ## Demo
 6 | 
 7 | Coming soon. Please see [react-stack-grid](https://github.com/tsuyoshiwada/react-stack-grid) for an indication of the features.
 8 | 
 9 | ## Installation
10 | 
11 | NPM:
12 | 
13 | ```
14 | npm install --save vue-stack-grid
15 | ```
16 | 
17 | ## Usage
18 | 
19 | ### Basic
20 | 
21 | ```vue
22 | <template>
23 |   <div>
24 |     <stack :column-min-width="320" :gutter-width="8" :gutter-height="8">
25 |       <stack-item v-for="(item, i) in items" :key="i">
26 |         {{ item.someContent }}
27 |       </stack-item>
28 |     </stack>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 |   import { Stack, StackItem } from 'vue-stack-grid';
34 | 
35 |   export default {
36 |     components: { Stack, StackItem }
37 |   }
38 | </script>
39 | 
40 | ```
41 | 
42 | ### With animation
43 | 
44 | For animation, simply add `style="transition: transform 300ms"` to the `stack-item`s.
45 | 
46 | ### With images
47 | 
48 | If images appear anywhere in the stack items, apply the `monitor-images-loaded` prop to the `stack` component.
49 | 
50 | ## Props
51 | 
52 | ### Stack
53 | 
54 | | Name | Type | Required | Default | Description |
55 | | --- | --- | --- | --- | --- |
56 | | `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. |
57 | | `gutter-width` | Number | No | `0` | The space between columns in pixels. |
58 | | `gutter-height` | Number | No | `0` | The space between items in the same column. |
59 | | `monitor-images-loaded` | Boolean | No | `false` | If true, reflow once all images are loaded using [vue-images-loaded](https://github.com/David-Desmaisons/Vue.ImagesLoaded). 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. |
60 | 
61 | Note that `gutter-width` and `gutter-height` can also be replaced by adding margin/padding to the stack items.
62 | 
63 | ## Examples
64 | Clone the repository and run: `npm run examples`
65 | 
66 | ## Future plans
67 | 
68 |  - Handle adding/removing items.
69 |  - Add build system.
70 |  - Add demo.
71 |  - **Please make feature requests if you have any!**
72 | 


--------------------------------------------------------------------------------
/bin/examples.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | 
 3 | const { lstatSync, readdirSync } = require('fs')
 4 | const { join, resolve } = require('path')
 5 | const { execSync } = require('child_process')
 6 | const inquirer = require('inquirer')
 7 | 
 8 | const EX_DIR = resolve('examples')
 9 | const IS_WIN = /^win/.test(process.platform)
10 | 
11 | const dirs = readdirSync(EX_DIR).map(fn => join(EX_DIR, fn)).filter(f => (
12 |   lstatSync(f).isDirectory()
13 | ))
14 | 
15 | inquirer.prompt([{
16 |   type: 'list',
17 |   name: 'ex',
18 |   message: 'Which example would you like to run?',
19 |   choices: dirs.map(dir => dir.replace(`${EX_DIR}/`, ''))
20 | }])
21 |   .then(r => {execSync(IS_WIN ? `poi ${r.ex}` : `poi ${join(EX_DIR, r.ex)}`, { stdio: [0, 1, 2] }) })
22 |   // swallow child exit exceptions
23 |   .catch(() => process.exit(0))
24 | 


--------------------------------------------------------------------------------
/examples/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/WouterFlorijn/vue-stack-grid/ec17f08347bfd61dcc504832293de23f9593687d/examples/.gitkeep


--------------------------------------------------------------------------------
/examples/simple/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <h1>Vue Stack Grid</h1>
 4 |     <stack :column-min-width="300" :gutter-width="15" :gutter-height="15" monitor-images-loaded>
 5 |       <stack-item class="img-container" v-for="(item, i) in images" :key="i">
 6 |         <img :src="`https://via.placeholder.com/${item}`">
 7 |       </stack-item>
 8 |     </stack>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | import { Stack, StackItem } from '../../'
14 | 
15 | export default {
16 |   components: { Stack, StackItem },
17 |   data() {
18 |     return {
19 |       images: [
20 |         '350x150',
21 |         '300x500',
22 |         '400x200',
23 |         '200x200',
24 |         '400x400',
25 |         '200x200',
26 |         '200x250',
27 |         '500x500',
28 |         '300x250',
29 |         '400x200',
30 |         '200x300',
31 |         '300x300',
32 |         '500x200',
33 |         '300x300',
34 |         '250x250',
35 |         '300x500',
36 |         '200x200',
37 |         '400x400',
38 |         '200x200',
39 |         '200x250',
40 |         '500x500',
41 |         '300x250',
42 |         '400x200',
43 |         '200x300',
44 |         '350x150',
45 |         '300x500',
46 |         '400x200',
47 |         '200x200',
48 |         '350x150',
49 |         '300x500',
50 |         '400x200',
51 |         '200x200',
52 |         '400x400',
53 |         '300x250',
54 |         '400x200',
55 |         '200x300',
56 |         '300x300',
57 |         '500x200',
58 |       ]
59 |     }
60 |   }
61 | }
62 | </script>
63 | 
64 | <style>
65 | #app {
66 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
67 |   -webkit-font-smoothing: antialiased;
68 |   -moz-osx-font-smoothing: grayscale;
69 |   text-align: center;
70 |   color: #2c3e50;
71 |   margin-top: 60px;
72 | }
73 | 
74 | .img-container {
75 |   display: flex;
76 |   align-items: center;
77 |   justify-content: center;
78 |   flex-direction: center;
79 |   overflow: hidden;
80 |   margin: 0;
81 |   object-fit: fill;
82 |   cursor: pointer;
83 | }
84 | 
85 | .img-container img {
86 |   display: block;
87 |   margin: 0;
88 |   width: 100%;
89 |   height: auto;
90 | }
91 | 
92 | .img-container figcaption {
93 |   margin: 3px 0;
94 |   text-align: center;
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/examples/simple/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import Stack from './src/Stack.vue'
2 | import StackItem from './src/StackItem.vue'
3 | 
4 | export { Stack, StackItem }
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-stack-grid",
 3 |   "version": "1.2.2",
 4 |   "description": "Vue components for stack grid/waterfall/Pinterest type layouts. Lightweight, reactive and responsive.",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "build": "npm install && webpack",
 8 |     "watch": "webpack --watch",
 9 |     "examples": "node bin/examples"
10 |   },
11 |   "author": {
12 |     "name": "Wouter Florijn",
13 |     "email": "woutermflorijn@gmail.com"
14 |   },
15 |   "license": "ISC",
16 |   "homepage": "https://github.com/WouterFlorijn/vue-stack-grid",
17 |   "repository": "WouterFlorijn/vue-stack-grid",
18 |   "keywords": [
19 |     "vue",
20 |     "grid",
21 |     "pinterest",
22 |     "stack",
23 |     "waterfall"
24 |   ],
25 |   "dependencies": {
26 |     "vue-images-loaded": "^1.1.2"
27 |   },
28 |   "devDependencies": {
29 |     "inquirer": "^7.1.0",
30 |     "poi": "^12.8.0",
31 |     "vue": "^2.6.11",
32 |     "vue-template-compiler": "^2.6.11"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/Stack.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="vsg-container" ref="container" v-images-loaded:on.progress="imagesLoaded">
  3 |     <slot></slot>
  4 |   </div>
  5 | </template>
  6 | 
  7 | <script>
  8 |   import imagesLoaded from 'vue-images-loaded'
  9 | 
 10 |   export default {
 11 |     props: {
 12 |       columnMinWidth: {
 13 |         type: Number,
 14 |         required: true
 15 |       },
 16 |       gutterWidth: {
 17 |         type: Number,
 18 |         default: 0
 19 |       },
 20 |       gutterHeight: {
 21 |         type: Number,
 22 |         default: 0
 23 |       },
 24 |       monitorImagesLoaded: {
 25 |         type: Boolean,
 26 |         default: false
 27 |       }
 28 |     },
 29 |     data() {
 30 |       return {
 31 |         containerWidth: 0,
 32 |         columnCount: 0,
 33 |         columnWidth: 0,
 34 |         baseColumns: []
 35 |       }
 36 |     },
 37 |     mounted() {
 38 |       window.addEventListener('resize', this.reflow)
 39 |       this.update()
 40 |     },
 41 |     destroyed() {
 42 |       window.removeEventListener('resize', this.reflow)
 43 |     },
 44 |     methods: {
 45 |       updateColumnData() {
 46 |         this.containerWidth = this.getContainerWidth()
 47 |         this.columnCount = this.getColumnCount()
 48 |         this.columnWidth = this.getColumnWidth()
 49 |       },
 50 |       getContainerWidth() {
 51 |         return this.$refs.container ? this.$refs.container.clientWidth : 0
 52 |       },
 53 |       getColumnCount() {
 54 |         for (let i = 1; true; i++)
 55 |         {
 56 |           let w = i * this.columnMinWidth + (i - 1) * this.gutterWidth
 57 |           if (w > this.containerWidth)
 58 |             return Math.max(i - 1, 1)
 59 |         }
 60 |       },
 61 |       getColumnWidth() {
 62 |         return (this.containerWidth - (this.columnCount - 1) * this.gutterWidth) / this.columnCount
 63 |       },
 64 |       getBaseColumns() {
 65 |         let cols = []
 66 |         for (let i = 0; i < this.columnCount; i++)
 67 |           cols.push({
 68 |             x: i * (this.columnWidth + this.gutterWidth),
 69 |             h: 0
 70 |           })
 71 |         return cols
 72 |       },
 73 |       update() {
 74 |         this.$nextTick(this.reflow)
 75 |       },
 76 |       reflow() {
 77 |         this.updateColumnData()
 78 |         let cols = this.getBaseColumns()
 79 | 
 80 |         this.$emit('reflow', {
 81 |           containerWidth: this.containerWidth,
 82 |           columnCount: this.columnCount,
 83 |           columnWidth: this.columnWidth,
 84 |         })
 85 | 
 86 |         this.$children.forEach((child, i) => {
 87 |           child.$el.style.width = this.columnWidth + 'px'
 88 | 
 89 |           let n = 0
 90 |           if (i < this.columnCount)
 91 |             n = i
 92 |           else
 93 |           {
 94 |             let minH = -1
 95 |             cols.forEach((col, j) => {
 96 |               if ((minH == -1) || (col.h < minH))
 97 |               {
 98 |                 n = j
 99 |                 minH = col.h
100 |               }
101 |             })
102 |           }
103 | 
104 |           child.$el.style.transform = 'translate(' + cols[n].x + 'px, ' + cols[n].h + 'px)'
105 |           cols[n].h += child.$el.offsetHeight + this.gutterHeight
106 |         })
107 | 
108 |         let containerHeight = 0
109 |         cols.forEach(col => containerHeight = Math.max(containerHeight, col.h))
110 |         this.$el.style.height = containerHeight + 'px'
111 |       },
112 |       imagesLoaded() {
113 |         this.$emit('images-loaded')
114 | 
115 |         if (this.monitorImagesLoaded)
116 |           this.reflow()
117 |       }
118 |     },
119 |     directives: {
120 |       imagesLoaded
121 |     }
122 |   }
123 | </script>
124 | 
125 | <style scoped>
126 |   .vsg-container {
127 |     display: block;
128 |     position: relative;
129 |     width: 100%;
130 |   }
131 | </style>
132 | 


--------------------------------------------------------------------------------
/src/StackItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div class="vsg-stack-item">
 3 | 		<slot></slot>
 4 | 	</div>
 5 | </template>
 6 | 
 7 | <style scoped>
 8 | 	.vsg-stack-item {
 9 | 		position: absolute;
10 | 		top: 0;
11 | 		left: 0;
12 | 	}
13 | </style>
14 | 


--------------------------------------------------------------------------------