vue-masonry-wall-layout

Vue Responsive Masonry Wall Layout DOM Manipulation and SSR Support

by

Vue masonry wall is a pure responsive masonry implementation without direct domino manipulation, suitable for SSR with lazy append.

responsive masonry grid github, masonry layout examples, masonry grid bootstrap, vue masonry layout npm, masonry grid js, masonry layout vue

Features

  • There is no direct manipulation in the DOM
  • SSR is friendly and able to load and rehydrate later
  • 1 dependency only, no old dependencies
  • Automatically slow append, scroll to load more automatically
  • Automatic item mode will find the best column
  • Responsive design

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-masonry-wall

# NPM
$ npm install vue-masonry-wall --save

1. Import wall masonry after installation.

import VueMasonryWall from "vue-masonry-wall";

2. Add the vue-masonry-wall component to the template.

<template>
  <section>
    <vue-masonry-wall :items="items" :options="options" @append="append">
      <template v-slot:default="{item}">
        <div class="Item">
          <img :src="item.image"/>
          <div class="Content">
            <h5 class="text-ellipsis-1l">{{item.title}}</h5>
            <p class="text-ellipsis-2l">{{item.content}}</p>
          </div>
        </div>
      </template>
    </vue-masonry-wall>
  </section>
</template>

3. Render a layout on the app.

export default {
  name: "ExampleMasonry",
  components: {VueMasonryWall},
  data() {
    return {
      options: {
        width: 300,
        padding: {
          2: 8,
          default: 12
        },
      },
      items: [
        {
          title: 'Sed non ante non cras amet',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non sagittis leo. Vestibulum sit amet metus nec neque dignissim dapibus.',
          image: 'https://picsum.photos/id/1015/600/600'
        },
        {
          title: 'Curabitur sit amet nunc',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id mollis erat. Aliquam erat volutpat. Nunc erat lacus, rhoncus nec.',
          image: 'https://picsum.photos/id/1019/600/700'
        },
        {
          title: 'Proin pharetra, ante metus',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac diam ac ex efficitur posuere. Pellentesque cursus pellentesque risus, non.',
          image: 'https://picsum.photos/id/1039/600/800'
        },
        {
          title: 'Cras pharetra non enim a',
          content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada varius nibh, a malesuada nisi feugiat eget. Aenean convallis semper.',
          image: 'https://picsum.photos/id/1042/600/300'
        },
      ]
    }
  },
  methods: {
    append() {
      // append method
    }
  }
}

4. Virtual props.

/**
 * Array of items to add into masonry
 */
items: {
  type: Array,
  required: true
},
/**
 * Options to config masonry.
 *
 * {
 *     width: 300,
 *     padding: {
 *         default: 12,
 *         1: 6,
 *         2: 8,
 *     },
 *     throttle: 300
 * }
 */
options: {
  type: Object,
  required: false
},
/**
 * SSR has no clue what is the size of your height of your element or width of the browser.
 * You can however guess based on user-agent: https://github.com/nuxt-community/device-module
 * This param allow you to preload a config for SSR rendering, it will distribute your items into all columns evenly.
 *
 * Once the client is mounted, it will redraw if the config is different from SSR.
 *
 * {
 *     column: 2
 * }
 */
ssr: {
  type: Object,
  required: false
}

Responsive Masonry Layout With SSR And Lazy Load Support, vue masonry wall Plugin/Github

See Demo And Download

Demo
Download

Official Website(fuxingloh): Click Here

This superior jQuery/javascript plugin is developed by fuxingloh. For extra Advanced Usages, please go to the official website.

Leave a Comment