Vuetify v-card 像拼图一样贴合（砌体布局）答案

【问题标题】：Vuetify v-card fit like a puzzle (Masonry layout)Vuetify v-card 像拼图一样贴合（砌体布局）
【发布时间】：2020-07-09 11:50:48
【问题描述】：

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

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

现在是这样的：

【问题讨论】：

标签： css vue.js vuetify.js

【解决方案1】：

没有办法（还）通过 Vuetify API 解决这个问题。相关GithubFeature Req:

[Feature Request] Masonry Layout #4091

Masonry.js 的解决方案

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

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

Masonry.js 和 vuetify 网格 - 代码 sn-p

<!-- 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 import Masonry from 'masonry-layout'

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

Masonry 在具有一组子项的容器网格元素上工作。

将class（或id）添加到您的弹性框网格（设置为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 //清洁溶液）

我在 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-']",
      });
  }
})

文档：

masonry.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/

【讨论】：

第 3 步更好地使用：mounted () { new Masonry(document.querySelector('.masonry'), { // options itemSelector: ".child", }) }

【解决方案2】：

如果您使用的是 VueJs 和 Vuetify，请尝试使用 vue.js masonry。使用 vue-masony，您需要做的就是 v-row 和 v-col 而不是 div。

<v-row v-masonry transition-duration="0.3s" item-selector=".item">
    <v-col v-masonry-tile class="item" cols="12" v-for="(content_obj, index) in class_contents" key="`content${index}`" sm="3" >
            ...
    </v-col>
</v-row>

【讨论】：