example_masonry_layout.vue

<template>
  <div class="test-container">
    <client-only>
      <div v-for="itemKey of Object.keys(items)" :key="itemKey">
        <masonry
          :cols="{ default: 4, 1000: 3, 700: 2, 400: 1 }"
          :gutter="{ default: '30px', 700: '15px' }"
          class="masonry-layout"
        >
          <div
            v-for="(item, index) in items[itemKey]"
            :key="index"
            class="item"
          >
            <img :src="item" :style="`height: ${randomHeight()}`" />
            Item: {{ index + 1 }}
          </div>
        </masonry>
        <div class="separate-line">{{ itemKey }}</div>
      </div>
    </client-only>
  </div>
</template>
<script>
import Vue from 'vue';

export default {
  data() {
    return {
      instance: null,
      sizes: [
        { columns: 1, gutter: 10 },
        { mq: '420px', columns: 2, gutter: 10 },
        { mq: '576px', columns: 3, gutter: 10 },
        { mq: '768px', columns: 4, gutter: 10 }
      ],
      items: {
        month_1: [
          'https://image.shutterstock.com/z/stock-photo-feather-of-a-bird-in-droplets-of-water-on-a-dark-background-macro-silhouette-of-a-blue-and-white-667227913.jpg',
          'https://image.shutterstock.com/z/stock-photo-water-droplets-on-pine-needles-734016304.jpg',
          'https://image.shutterstock.com/image-photo/north-shore-hiusa-012619-close-600w-1543153952.jpg',
          'https://image.shutterstock.com/image-photo/fire-blacksmith-forging-metals-construction-260nw-662609116.jpg',
          'https://image.shutterstock.com/image-photo/ax-stuck-stump-wooden-forest-260nw-1429255124.jpg'
        ],
        month_2: [
          'https://image.shutterstock.com/z/stock-photo-feather-of-a-bird-in-droplets-of-water-on-a-dark-background-macro-silhouette-of-a-blue-and-white-667227913.jpg',
          'https://image.shutterstock.com/z/stock-photo-water-droplets-on-pine-needles-734016304.jpg',
          'https://image.shutterstock.com/image-photo/north-shore-hiusa-012619-close-600w-1543153952.jpg',
          'https://image.shutterstock.com/image-photo/fire-blacksmith-forging-metals-construction-260nw-662609116.jpg',
          'https://image.shutterstock.com/image-photo/ax-stuck-stump-wooden-forest-260nw-1429255124.jpg'
        ],
        month_3: [
          'https://image.shutterstock.com/z/stock-photo-feather-of-a-bird-in-droplets-of-water-on-a-dark-background-macro-silhouette-of-a-blue-and-white-667227913.jpg',
          'https://image.shutterstock.com/z/stock-photo-water-droplets-on-pine-needles-734016304.jpg',
          'https://image.shutterstock.com/image-photo/north-shore-hiusa-012619-close-600w-1543153952.jpg',
          'https://image.shutterstock.com/image-photo/fire-blacksmith-forging-metals-construction-260nw-662609116.jpg',
          'https://image.shutterstock.com/image-photo/ax-stuck-stump-wooden-forest-260nw-1429255124.jpg'
        ]
      }
    };
  },
  mounted() {
    Vue.nextTick(() => {});
  },
  methods: {
    randomHeight() {
      return Math.round(Math.random() * Math.abs(500 - 100) + 100)
        .toString()
        .concat('px');
    }
  }
};
</script>
<style lang="scss" scoped>
.test-container {
  max-width: 1200px;
  margin: auto;
  width: 100%;
}
.masonry-layout {
  .item {
    img {
      width: 100%;
      height: auto;
    }
  }
}
.separate-line {
  border-bottom: 1px solid red;
  text-align: center;
  margin-bottom: 15px;
}
</style>