node package manager

vue-masonry

vue-masonry

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

Plugin DEMO available 🎉

DEPENDENCIES status

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. Set gutter to an Element or Selector String to use the outer width of the element.

💡 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

License

MIT