vue-masonry

Vue.js directive for masonry blocks layouting. Original masonry library.

Plugin DEMO available 🎉

You can also clone the basic demo repository vue-masonry + vue-cli webpack.

Install & Usage

• Get from npm: npm install vue-masonry --save

  or from bower bower install vue-masonry

• Make sure that the masonry library is included; for example using cdn link: <script async defer src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.0.0/masonry.pkgd.min.js"></script> or in other convenient way.

• Use in component code

  import Vue from 'vue'
  import {VueMasonryPlugin} from 'vue-masonry';
  
  Vue.use(VueMasonryPlugin)
  
  <div v-masonry transition-duration="0.3s" item-selector=".item">
      <div v-masonry-tile class="item" v-for="(item, index) in blocks">
         <!-- block item markup -->
      </div>
  </div>
  

Properties currently available reproduce most of those on the original masonry plugin:

• item-selector=".item" - list element DOM item selector;
• transition-duration="0.3s - duration of transitions;
• column-width="#test" - element selector for column width;
• origin-left="false" - set to group elements to the right instead of left by default
• origin-top="false" - set to group elements to the bottom instead of top by default
• stamp=".stamp" - specifies which elements are stamped within the layout
• gutter=".gutter-block-selector" - specifies [horizontal space between item elements] (https://masonry.desandro.com/options.html#gutter). Set gutter to an Element or Selector String to use the outer width of the element.
• fit-width="true" - sets the width of the container to fit the available number of columns

💡 New 💡 : If you need to manually trgiger masonry layout redraw (for example in case if your tile elements amount or content has changed) you can now use Vue.redrawVueMasonry() method.

Questions, bugs

• Check the original masonry library docs
• Create an issue or ping me on twitter @legkoletat

License

MIT