css - Vuetify v-card 适合拼图(砌体布局)

Question

我有一个包含 6 个或更多 v-card 的页面。

有没有办法像拼图一样把它们拼起来？我想删除第一行和第二行的小 v-card 之间的空白。

现在是这样的:

Answer 1

没办法(还)通过 Vuetify API 解决这个问题。相关Github Feature要求:

[Feature Request] Masonry Layout #4091

Masonry.js 解决方案

使用 Javascript 插件。例如masonry.js .

Codepen 演示: https://codepen.io/ezra_siton/pen/gOpZqKr

Masonry.js 和 vuetify 网格 - 代码片段

<!-- https://vuetifyjs.com/en/ -->
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
<v-app>
  <v-content>
    <v-container>
      <v-row class="masonry">
        <v-col class="child" cols="12" sm="6">
          <v-card class="pa-2" color="pink darken-1" dark>
            <v-card-title>Card 1</v-card-title>
            <v-card-text>
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham. One of three columns
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
              </v-card-text>
          </v-card>
        </v-col>
        <!-- card 2-->
        <v-col class="child" cols="12" sm="6">
          <v-card class="pa-2"  color="orange darken-3" dark>
            <v-card-title>Card 2</v-card-title>
            <v-card-text>
              One The standard chunk of Lorem Ipsum used since the 1500s is 
              </v-card-text>
          </v-card>
        </v-col>
        <!-- card 3 -->
        <v-col class="child" cols="12" sm="6">
          <v-card class="pa-2" color="#385F73" dark >
            <v-card-title>Card 3</v-card-title>
            <v-card-text>
              The chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
              </v-card-text>
          </v-card>
        </v-col>
        <!-- card 4 -->
        <v-col class="child" cols="12" sm="6">
          <v-card class="pa-2" color="blue darken-4" dark >
            <v-card-title>Card 4</v-card-title>
            <v-card-text>
              The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections form, Rackham.
              </v-card-text>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-content>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

<script>
 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  mounted: function () {
      // Code that will run only after the
      // entire view has been rendered
      var msnry = new Masonry( '.masonry', {
        // options
        itemSelector: "[class*='col-']",
      });
  }
})
</script>

如何(不到 1 分钟)

第 1/3 步:正文之前的 CDN

直接链接到 unpkg 上的 Masonry 文件.

<script src="https://unpkg.com/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script>

-或- 使用 npm 安装:npm install masonry-layout并使用导入 import Masonry from 'masonry-layout'

第 2/3 步:HTML - 设置容器元素

Masonry works on a container grid element with a group of child items.

添加 class (或 id )到您的 flexbox 网格(设置为 container element )。 masonry在此示例中(使用您想要的任何名称)。

<v-row class="masonry">
  <v-col class="child" cols="12" sm="6">
   <v-card class="pa-2" outlined >
..rest of the code

第 3/3 步:使用 vanilla js 初始化

new Masonry( elem, options )

3.1:使用.masonry作为容器元素参数。

3.2: 内部选项对象 - 设置 itemSelector到: itemSelector: "[class*='col-']"

[class*='col-'] : Wildcard selector (选择任何包含 col 的类。例如:.col-6 - 或 - .col-md-2 ==> DRY//Clean solution)

我在 vue mounted() 中加载脚本 lifecycle hook (在组件添加到 DOM 之后)。

 new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  mounted: function () {
      // Code that will run only after the
      // entire view has been rendered
      var msnry = new Masonry( '.masonry', {
        // options
        itemSelector: "[class*='col-']",
      });
  }
})

文档:

• ma​​sonry.js 文档: https://masonry.desandro.com/
• Vuetify 网格系统文档: https://vuetifyjs.com/en/components/grids/

---

自定义CSS解决方案

另一种选择是使用 flexbox/Grid 和自定义 CSS，在我看来，对于这样一个简单的任务来说，代码和想法太多了。相关文章:

https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/