Создать список тканых изображений - PullRequest
Новая
       17

Создать список тканых изображений

0 голосов
/ 20 мая 2018

Я рассчитываю реализовать список тканых изображений, как указано в рекомендациях по проектированию материалов:

Ссылка на руководство

Реализация по святыне iНацеливаюсь

Принцип состоит в том, чтобы создавать различные соотношения для изображений в списке изображений.Я хочу сделать это с помощью 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%;
}

Цель таких классовЭто изменение размера, однако, суть в том, как применять эти классы для воспроизведения желаемого шаблона:

ABAB BABA

...