Woven:创建编织图像列表(woven image)

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

Link to guideline Implementation by shrine i'm aiming

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

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

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

这里是背后的真实代码以及它是如何呈现的。它是 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

我正在寻找可以执行此操作的算法(langage 并不重要,但 js 仍然是首选)。

提前谢谢你

EDIT2

css 类如下:

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

这些类的目的是改变大小,但是,更重要的是如何获得这些类来重现所需的模式:

A B A B B A B A

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(213)
电脑指令代码大全耍帅:任何Android平板电脑与NEON指令集
上一篇
华为荣耀cd28:[Android] [CI/CD] [管道]aapt2W 09-2911:28:13896896LoadedA
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(67条)