时间戳

首页 > 解决方案 > 如何在 VueJS 中制作图像网格堆栈？

vue.js - 如何在 VueJS 中制作图像网格堆栈？

问题描述

我有垂直和水平的图片，我想制作瀑布/砖石/pinterest网格布局，我发现可以制作“堆栈”网格，但我尝试了许多不同的代码，但我仍然无法制作它，因为我想将它实现到我现有的代码中（而且我太新鲜了，不能这样做）。也许有更简单的方法来做到这一点？先感谢您

<template >
  <v-container
    fluid
    grid-list-xs
    text-xs-center
    fill-height
    max-height: 100vh;
    class="product"

  >
    <v-layout align-center justify-center row wrap class="container">
      <v-flex xs10 sm6 md4 lg3 class="mr-2 mb-2" v-for="(obj,key) in portfolio" :key="key">
        <v-hover>
          <v-card flat slot-scope="{ hover }" class="mx-auto" color="transparent">
            <v-img  class="image" v-bind:src="obj.img">
              <v-expand-transition>
                <div
                  v-if="hover"
                  class="d-flex transition-fast-in-fast-out grey darken-4 v-card--reveal display-3 white--text"
                  style="height: 100%;"
                >
                  <h4>{{ obj.title }}</h4>
                </div>
              </v-expand-transition>
            </v-img>
          </v-card>
        </v-hover>
      </v-flex>
    </v-layout>
  </v-container>
</template>

标签： vue.jsgridstack

解决方案

你可能需要一个顶级的 v-layout 和 v-flex。

试试这样：

<template>
  <v-layout justify-center>
    <v-flex xs12>
     <v-card>
        <v-container
          fluid
          grid-list-xs
        >
          <v-layout row wrap>
            <v-flex
              xs10 sm6 md4 lg3 class="mr-2 mb-2" v-for="(obj,key) in portfolio" :key="key"
            >
              <v-card>
                <v-img
                  class="image" :src="obj.img"
                >
                  <v-expand-transition>
                    <div
                      v-if="hover" 
                     class="d-flex transition-fast-in-fast-out grey darken-4 v-card--reveal display-3 white--text"
                     style="height: 100%;"
                    >
                      <h4>{{ obj.title }}</h4>
                    </div>
                  </v-expand-transition>
                </v-img>
              </v-card>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
    </v-flex>
  </v-layout>
</template>

推荐阅读