codekraft-studio/vue-justified-layout

A component to use Flickr justified layout with Vue.

vue-justified-layout

Vue integration for Flickr's justified layout module

Chcek out the documentation for a complete reference and usage examples.

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>

---

Contributing

1. Create an issue reporting a bug or a feature
2. Fork the project (https://github.com/codekraft-studio/vue-justified-layout/fork)
3. Create your feature branch (git checkout -b my-new-feature)
4. Commit your changes (git commit -am 'Add some feature')
5. Publish the branch (git push origin my-new-feature)
6. Create a new Pull Request

---

License

This project is released under the MIT License by codekraft-studio.