vue-justified-layout

Vue integration for Flickr's justified layout module.

View Documentation View Github

Getting started

It's pretty easy to setup, just download the component with your favorite package manager.

npm install vue-justified-layout

Register the component globally using the plugin installation function.

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

Vue.use(VueJustifiedLayout)

Or import it into your scripts and register it as local component.

import VueJustifiedLayout from 'vue-justified-layout'

export default {
  name: 'app',
  components: {VueJustifiedLayout},
  data () {
    return {
      images: [{
        width: 250,
        height: 400,
        url: 'https://source.unsplash.com/featured/250x400?green,blue'
      }, {
        width: 300,
        height: 400,
        url: 'https://source.unsplash.com/featured/300x400?green,blue'
      }]
    }
  }
}

Optionally add some style for the images.

.justified-container {}
.justified-item {
  img {
    max-width: 100%;
  }
}

Then use it to display the array of images with a nice justified layout.

<VueJustifiedLayout :items="images" v-slot="{ item }">
  <img :src="item.url" />
</VueJustifiedLayout>

Or for vue < 2.6.0 versions using the old synthax.

<VueJustifiedLayout :items="images">
  <template slot-scope="{ item }">
    <img :src="item.url" />
  </template>
</VueJustifiedLayout>