css - 创建编织图像列表

Question

我希望实现一个编织图像列表，如材料设计指南中指定的：

链接到指南

我的目标是由神社实现

原理是为图像列表中的图像创建不同的比率。我正在寻找使用javascript来做到这一点。我虽然可以处理模数（％），但是我的数学很差，所以我不能比偶数和奇数做得更好，这还不够，因为一条两条线应该反转容器大小。

为了解决这个问题，我有当前图像的索引。列表的大小可能会有所不同。每行包含 4 个图像，我在 30 和 20 之间交替宽度。一个伪代码来说明我的代码的当前状态，它不工作

for (index : images) {
    if (index % 2 == 0)
        width = 20%
    else if (index % 2 != 0)
        width = 30%;
}

编辑

这是背后的真实代码及其呈现方式。这是 Vue.js 代码：

<v-flex v-for="(pic, index) in accomodation.images" v-bind:class="{flex30 : index % 2 == 0, flex20 : index % 2 != 0}">
    <img height="auto" style="width:100%" :src="pic.data"></img>
</v-flex>

有趣的部分在 v-bind:class 中，index 是图像的当前索引

这是它的渲染方式：

我的渲染

这是我希望它呈现的方式（此处手动更改了类）：

预期渲染

我正在寻找可以执行此操作的算法（语言无关紧要，但仍然首选 js）。

先感谢您

编辑 2

CSS类如下：

.flex20 {
    max-width:20%;
    flex-basis:20%;
}
.flex30 {
    max-width:30%;
    flex-basis:30%;
}

这些类的目的是改变大小，但是，重点更多是关于如何应用这些类来重现所需的模式：

巴巴巴巴

标签： cssmathvuejs2material-designmodulo