A component to use Flickr justified layout with Vue

vue-justified-layout

Vue integration for Flickr's justified layout module.

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>

---