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

【问题标题】：Easy way to apply masonry to vue grid items?将砌体应用于 vue 网格项目的简单方法？
【发布时间】：2021-08-16 08:55:26
【问题描述】：

是否有一种简单的方法可以将砌体应用于 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>

【问题讨论】：

标签： vue.js masonry

【解决方案1】：

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

【讨论】：

【解决方案2】：

<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 了解更多信息。

【讨论】：