Как сделать сетку для картинок как в Google картинках / Vkontakte

Сегодня я расскажу вам, как я решил задачу по расположению картинок в ряд с сохранением соотношения сторон. Почти как в Google картинках, но немного по другому.

Передо мной стояла задача выстроить картинки в ряд таким образом, чтобы они отображались без обрезанных краев, но при этом все были одной высоты.

Пытался решить эту задачу с помощью гридов и флексов, но все безуспешно :(

Итак, начнем.

Для начала заведем несколько переменных:

Изначально нам известны натуральные размеры изображения:

Мы сразу можем вычислить соотношение сторон:

На всякий случай выставляем 1, т.к. у нас может не загрузиться картинка и ее величины будут по нулям, следовательно мы поделим на ноль и получим NaN.

Также нам надо сложить значения всех соотношений сторон для дальнейшего вычисления высоты ряда:

Используя все вышесказанное мы уже можем накидать некоторую функцию:

В const imagesArray мы собираем массив с картинками и их соотношением сторон.

Дальше мы должны вычислить ширину ряда и его высоту и еще добавим проверку для одного изображения в ряду.

Теперь приступим к самому интересному: вычислим и присвоим нужную ширину каждого изображения:

Выставим ширину в процентах, что бы у нас все ресайзилось как надо.

В итоге получаем вот такой срипт:

Пример можете посмотреть на jsfiddle:

P.S. я понимаю что обращаться к DOM стоит крайне дорого и все это дело вызывает ререндер лейаута, но пока это единственный способ, к которому я пришел.

P.P.S. Есть множество плагинов, которые делают почти тоже самое, но они все не подходили мне по тем или иным причинам. В основном потому, что нельзя четко задать какое количество картинок должно быть в ряду.

Для красивости можно сделать проявление картинок из прозрачности.

Вот и все, надеюсь кому-то это поможет :)

UPD: Буду рад любым идеям и замечаниям в комментах.