Question

我有垂直和水平的图片，我想制作瀑布/砌体/ 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>

Answer 1

您可能需要顶层的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>

如何在VueJS中制作图像网格堆栈？

1 个答案: