时间戳

首页 > 解决方案 > 将砌体应用于 vue 网格项目的简单方法？

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

问题描述

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

解决方案

<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 添加到您的项目中，然后只需添加

数据砌体='{"percentPosition": true }'

排到你的行，砌体会自动工作。查看此链接了解更多信息。

推荐阅读