Flickr Style Justified Layout For Vue.js

Install & Download:

# NPM
$ npm install vue-justified-layout --save

Description:

A Vue.js component to create a responsive, customizable, justified layout inspired by Flickr.com.

How to use it:

1. Install and import the component.

import Vue from 'vue'
import VueJustifiedLayout from 'vue-justified-layout'

2. Register the component.

// Global
Vue.use(VueJustifiedLayout);
// Local
import {VueJustifiedLayout} from 'vue-justified-layout'
export default {
  name: 'MyComponent',
  components: {VueJustifiedLayout}
}

3. Create a basic justified layout and specify an array of aspect ratio as follows:

<VueJustifiedLayout :items="[0.3, 0.6, 0.4, 0.6]" />

4. Possible options to customize the justified layout.

<vue-justified-layout :items="items" :options="{
  containerWidth: 250,
  containerPadding: {
    top: 50,
    right: 5,
    bottom: 50,
    left: 5
  },
  boxSpacing: {
    horizontal: 25,
    vertical: 10
  },
  targetRowHeight: 250,
  forceAspectRatio: 1,
  showWidows: false,
  fullWidthBreakoutRowCadence: 2
}" />