Как сделать таку сетку?

Question

[Александр Наумов]

Есть пример картинок как должен быть расположен каждый блок.
всего будет 3 разных галереи.

Работать должен так, добавляем 1 картинку вид как у первого блока.
Добавляем 2 картинки вид получается как у 2 блока.
Добавляем 3 картинки вид получается как у 3 блока.
и т.д.

Вот пример как должно быть.
https://docs.google.com/document/d/1P9CSG3XRu9RXph...

Answer 1

[Антон Усачев]

Answer 2

[Анатолий Куликов]

На js напишите функцию, которая в зависимости от количества приходящих файлов строит нужную сетку (с нужным количеством элементов), а потом через CSS всё оформляется и всё. Или схожий вариант - js смотрит на количество объектов и добавляет класс-модификатор в родительский контейнер.

Comments

[Александр Наумов]

Можете подсказать как орагинизовать подсчет объектов и добавить класс ?

[Анатолий Куликов]

Если с добавлением класса родителю, то примерная логика такая:

1. Получаем все объекты, заводим в массив (arr)
   
2. Узнаём длину массива (arr.length)
   
3. Нужному объекту добавляем класс в зависимости от длины (element.classList.add('название-класса') - в простейшем виде можно добавить arr.length как класс с каким-либо префиксом)
   

[Александр Наумов]

Анатолий Куликов,

$(document).ready(function () {
 $(".gal").each(function() {
  var len = $('div.gallery__item', this).length;
  if (len < 2){
    $(".gal").addClass('active')
  }
  else{

  }
});
});

Так ?

[Анатолий Куликов]

Да, типа того

[Александр Наумов]

Но почему то он добавляется ко всем блокам, а не только в том где есть это число блоков.

[Анатолий Куликов]

А можно посмотреть на код вёрстки?