Question

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

原则是为图像列表中的图像创建不同比率。我希望用javascript做到这一点。我虽然可以处理模数（％）然而我在数学上很糟糕所以我不能比偶数和奇数做得更好，这是不够的，因为一行两行应该反转容器大小。

要解决此问题，我有当前图像的索引。列表的大小可能会有所不同。每行包含4个图像，我在30 et 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是图像的当前索引

以下是它的呈现方式：

My render

以下是我想要渲染的方法（类在这里手动更改）：

Expected render

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

提前谢谢

编辑2

css类如下：

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

此类的目的是改变大小，但更重要的是如何使这些类应用于重现所需的模式：

A B A B B A B A

创建编织图像列表

0 个答案: