Vue.js 将v形卡堆叠在n列中

我有

items:Item[]

，从中我建立了一个

v-card

列表。我需要这样建造它们：

规格：

• 每张卡片的宽度相同，但高度随机
• 要堆叠的下一张卡必须位于填充最少的列（左优先）
• 列数可以随屏幕宽度而更改

• 项可以更改，因此列必须动态更改

---

我找到了一个纯JS的解决方案，我在一个隐藏的div中构建卡片，我创建n个div，在其中我手动清除并克隆右边列中的卡片。但我认为这是一种肮脏的方式，动态更改失败。

因为vuetify的网格系统不允许这种包装。您可以使用css flex box来实现这种布局

使用换行选项定义容器列布局：

在v-for循环中设置项目的弹性和高度样式：

---

是沙箱。

因为

vuetify

s网格系统不允许这种包装。您可以使用css flex box来实现这种布局

使用换行选项定义容器列布局：

在v-for循环中设置项目的弹性和高度样式：

---

是沙箱。

好的，多亏了David Weldon，我找到了解决方案，使用了css砌体布局

我将我的项目作为数据保存

data:function（）{
返回{
项目：[
{id:1，文本：“lorem ipsum dolor sit amet…”，
{id:2，文本：“lorem ipsum dolor sit amet…”，
{id:3，文本：'lorem ipsum dolor sit amet…'，
{id:4，文本：'lorem ipsum dolor sit amet…'，
{id:5，文本：'lorem ipsum dolor sit amet…'}
],
}
}

我在一个简单的div中构建卡片

{{item.text}

然后制作css

.items{
列数：4；
柱间距：10px；
填充：0 5px；
}
.项目{
显示：内联块；
宽度：100%；
保证金：5px0；
}
/*让它反应灵敏*/
@仅介质屏幕和（最大宽度：1200px）{
.项目{
列数：3；
}
}

这是沙箱

---

谢谢大家的帮助

好的，多亏了David Weldon，我找到了解决方案，使用了css砌体布局

我将我的项目作为数据保存

data:function（）{
返回{
项目：[
{id:1，文本：“lorem ipsum dolor sit amet…”，
{id:2，文本：“lorem ipsum dolor sit amet…”，
{id:3，文本：'lorem ipsum dolor sit amet…'，
{id:4，文本：'lorem ipsum dolor sit amet…'，
{id:5，文本：'lorem ipsum dolor sit amet…'}
],
}
}

我在一个简单的div中构建卡片

{{item.text}

然后制作css

.items{
列数：4；
柱间距：10px；
填充：0 5px；
}
.项目{
显示：内联块；
宽度：100%；
保证金：5px0；
}
/*让它反应灵敏*/
@仅介质屏幕和（最大宽度：1200px）{
.项目{
列数：3；
}
}

这是沙箱

---

谢谢大家的帮助

搜索“css砖石布局”谢谢，我从没听说过！搜索“css砖石布局”谢谢，我从没听说过！嗯，我对flex css还不够好，无法真正理解会发生什么，我对@DavidWeldon所说的css砌体布局做了一些研究，我认为这是我首选的解决方案。嗯，我对flex css还不够好，无法真正理解会发生什么，我对@DavidWeldon所说的css砌体布局做了一些研究，我认为这是我更喜欢的解决方案。

#flex-container {
  height: 400px;
  max-height: 400px;
  flex-flow: column wrap;
  box-sizing: border-box;
  display: flex;
}

 <div id="flex-container">
    <template v-for="(item,i) in items">
      <div
        class="item"
        :key="i"
        :style="getStyle(item.height)"
      >{{item.height}}%</div>
    </template>
  </div>

getStyle(height) {
      return {flex: `1 1 ${height}%`, 'max-height': `${height}%` }
    }