将砌体应用于 vue 网格项目的简单方法？

问题描述

是否有一种简单的方法可以将 masonry 应用于 Vue 中的网格项？我一直在这里搜索教程和问题，但我一直无法将 Masonry 成功应用于我的应用程序。我正在寻找一种使用 Masonry 自动放置和调整图像大小的方法：

<template>
  <div class="row" v-if="othersImages">
      <div class="col" v-if="errors">
          <div class="alert alert-danger"><p>{{ errors }}</p></div>
      </div>
      <div id="others-images" class="grid">
          <div class="grid-item" v-for="image in othersImages" :key="image.id">
              <h5>{{ image.name }}</h5>
              <picture v-bind="'image' + image.id">
                <img v-bind:src="image.image.path" v-bind:alt="image.description"/>
              </picture>
          </div>
          <div class="clearfix"></div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'othersImages',created() {
    this.fetchImages();
  },data() {
    return {
      apiRequest: new this.$request(),othersImages: [],errors: '',};
  },methods: {
    fetchImages() {
      const endpoint = 'images';
      this.apiRequest.get(endpoint)
        .then((response) => {
          this.othersImages = response;
          this.errors = '';
        })
        .catch((errors) => {
          this.errors = errors;
        });
    },},};
</script>

解决方法

我相信，最简单的处理方法是应用一个基于 npm 包的插件：https://www.npmjs.com/package/vue-masonry。这是一个简单的库，支持好，体积小。

,

<template>
    <div data-masonry='{"percentPosition": true }' class="row">
        <div  class="full col-lg-4 half"></div>
        <div  class="half col-lg-4"></div>
        <div  class="full col-lg-4"></div>
        <div  class="full col-lg-4"></div>
        <div  class="half col-lg-4"></div>
        <div  class="full col-lg-4"></div>
        <div  class="full col-lg-4"></div>
        <div  class="half col-lg-4"></div>
        <div  class="full col-lg-4"></div>
        <div  class="full col-lg-4"></div>
    </div>
</template>

<script>
export default {}
</script>

<style>
    .row {
        width: 80vw;
        height: 600px;
        background-color: green;
        margin: auto;
    }

    .full {
        height: 150px;
        background-color: grey;
        border: 1px solid black;
    }

    .half {
        height: 75px;
        background-color: grey;
        border: 1px solid black;
    }
</style>

您应该将引导程序和砌体 CDN 添加到您的项目中，然后只需添加

data-masonry='{"percentPosition": true }'

线到您的行，砌体自动工作。 查看此link了解更多信息。