3

Задача разложить изображения в ряд мозайкой как это делают на freepik.com:

введите сюда описание изображения

Особенности:

  • Изображения всегда заполняют всю ширину экрана
  • Изображения выстраиваются в линии, при этом высота каждой линии отличается
  • Изображения идут в том порядке, в котором они получены с сервера. Изображения не перемешиваются.
  • Высота, ширина изображений выбирается не случайным образом, а максимально оптимально
  • Flex, а не абсолютное позиционирование
  • Изначально известен путь до изображения и его размеры (ширина, высота)
  • Исходные изображения или квадратные или прямоугольные, ширина всех всегда одинаковая (как на фрипике - 626px), а высота может отличаться.

Библиотеки вроде masonry (https://masonry.desandro.com), isotope (https://isotope.metafizzy.co) слишком монструозные, используют абсолютное позиционирование и не решают задачу всё равно.

Не понимаю, что взять за основу расчётов, ведь неизвестных несколько: неизвестно сколько изображений нужно добавить в ряд чтобы полностью заполнить ряд, а чтобы это понять нужно определить оптимальную высоту ряда. При этом само собой, на разных размерах экранов, разная оптимальная высота и количество изображений в ряду. Очевидно, что отталкиваться нужно от ширины/высоты оригинальных изображений и ширины/высоты экрана, но как именно для меня пока не понятно.

Вот пример с добавленными изображениями и выведенными размерами в атрибуты для удобства. Нужно задать оптимально ширину и высоту каждого элемента .image

.container {
  padding: 0 10px;
}

.row {
  margin: 0 -5px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;  
}

.image {
    margin: 0 5px 10px 5px;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="container">
 <div class="row">
  <div class="image" data-w="626" data-h="312">
    <img src="https://image.freepik.com/free-vector/enjoy-summer-3d-realistic-background-with-clouds-daisies-grass-leaves-product-podium_87521-3206.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="521">
    <img src="https://image.freepik.com/free-vector/linear-flat-wedding-monograms_52683-64319.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="442">
    <img src="https://image.freepik.com/free-vector/flat-car-poster-with-photo-horizontal_52683-64510.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-shapes_23-2148975080.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="286">
    <img src="https://image.freepik.com/free-photo/city-tornado-doomsday-scene-illustration_456031-22.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-texture_23-2148974472.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/hand-drawn-blackboard-coffee-collection_79603-1654.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="468">
    <img src="https://image.freepik.com/free-photo/person-putting-medical-mask-earth_23-2148984685.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="626">
    <img src="https://image.freepik.com/free-psd/3d-space-rocket-with-smoke_23-2148938939.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-shape-set_23-2148971570.jpg" alt="">
  </div>
 </div>
</div>

14
  • Скорее тут опечатка. Вместо высоты имеется ввиду ширина?
    – Locker
    22 июн 2021 в 14:07
  • Цитирую: неизвестно сколько изображений нужно добавить в ряд чтобы полностью заполнить ряд, а чтобы это понять нужно определить оптимальную высоту ряда.
    – Locker
    22 июн 2021 в 14:07
  • Нет, речь именно про высоту. На том же фрипике каждый ряд изображений имеет разную высоту. На глаз от 190px до 260px. Как они определяют оптимальное значение для каждого ряда я не могу понять. Но получается очень хорошо. Скорее всего цели именно "следить" за высотой нет, есть цель сделать ровную сетку по ширине, а высота уже получается сама по себе разной. Вот поэтому я пишу, что неизвестно сколько изображений должно быть в ряду, чтобы заполнить ряд и неизвестна оптимальная высота ряда. На 1440х800 px разрешении у них 4-5 изображений в ряду. Хотя наверняка может быть и по 6.
    – Floyat
    22 июн 2021 в 14:31
  • 1
    @Locker, исходные изображения имеют одну ширину, но разную высоту. В зависимости от ширины контейнера в ряд помещается определенное количество изображений, при этом высота их меняется таким образом, чтобы она была одинакова для всех изображений ряда, а итоговая ширина всех изображений соответствовала ширине контейнера. Разумеется, они как-то контролируют "изменяемость" высоты, чтобы изображения не были слишком мелкие. Скорее всего принято какое-то усредненное или минимальное значение для одного изображения.
    – Leonid
    22 июн 2021 в 15:51
  • 1
    Ширина делится на это значение и мы получаем максимальное кол-во изображений в ряд. Затем пробуем подставить это количество следующих в массиве изображений, если итоговая высота слишком мала (если попались широкие изображения), то подставляется на одно меньше изображение.
    – Leonid
    22 июн 2021 в 15:53

2 ответа 2

5

Здесь пример как можно сделать по два элемента в ряд, например (подгонка под малое окно просмотра). А так должен быть алгоритм, который рассматривает несколько изображений в ряд в зависимости от ширины контейнера, учитывая пределы возможного уменьшения изображений. Если нет - на одно изображение в ряд меньше.

const MARGINS = 60; // Margins, paddings, полоса прокрутки - на глаз
let image_arr = [...document.querySelectorAll('.image')]; // массив всех контейнеров изображений (боксов)
let obj_arr = image_arr.map(image => { // копия массива, но с более удобными для работы свойствами
  return {w: image.getAttribute('data-w'), h: image.getAttribute('data-h')};
}); 
let width = document.querySelector('.container').getBoundingClientRect().width - MARGINS; // Ширина общего контейнера для расчетов

let counter = 0;


changeSize = () => {
  let images = obj_arr.slice(counter, counter+2); // Берем по два бокса

  // Здесь берем меньшую по высоте картинку и изменяем вторую до этой же высоты, а ширину по коэффициенту для сохранения соотношения
  let lowest = images.indexOf(images.sort((a,b) => a - b)[0]); 
  let k1 = images[lowest].h/images[1-lowest].h;
  images[1-lowest].h *= k1;
  images[1-lowest].w *= k1;
  
  // Здесь складываем полученную ширину двух картинок и подгоняем под ширину контейнера
  let imagesW = images.reduce((acc,cur) => acc+= +cur.w, 0);
  let k2 = width/imagesW;
  images[lowest].w *= k2;
  images[lowest].h *= k2;
  images[1-lowest].w *= k2;
  images[1-lowest].h *= k2;

  counter += 2;
}

// Перебираем массив попарно
for (let i = 0; i < image_arr.length - 1; i+=2){
  changeSize();
}

// Назначаем размеры боксам соответственно рабочему массиву объектов.
image_arr.forEach((image,i) => {
    image.style.width = obj_arr[i].w + 'px';
    image.style.height = obj_arr[i].h + 'px';
})
.container {
  padding: 0 10px;
}

.row {
  margin: 0 -5px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;  
}

.image {
    margin: 0 5px 10px 5px;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="container">
 <div class="row">
  <div class="image" data-w="626" data-h="312">
    <img src="https://image.freepik.com/free-vector/enjoy-summer-3d-realistic-background-with-clouds-daisies-grass-leaves-product-podium_87521-3206.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="521">
    <img src="https://image.freepik.com/free-vector/linear-flat-wedding-monograms_52683-64319.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="442">
    <img src="https://image.freepik.com/free-vector/flat-car-poster-with-photo-horizontal_52683-64510.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-shapes_23-2148975080.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="286">
    <img src="https://image.freepik.com/free-photo/city-tornado-doomsday-scene-illustration_456031-22.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-texture_23-2148974472.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/hand-drawn-blackboard-coffee-collection_79603-1654.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="468">
    <img src="https://image.freepik.com/free-photo/person-putting-medical-mask-earth_23-2148984685.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="626">
    <img src="https://image.freepik.com/free-psd/3d-space-rocket-with-smoke_23-2148938939.jpg" alt="">
  </div>
  <div class="image" data-w="626" data-h="417">
    <img src="https://image.freepik.com/free-vector/gradient-grainy-gradient-shape-set_23-2148971570.jpg" alt="">
  </div>
 </div>
</div>

3
+50

На freepik.com используется opensource-библиотека JavaScript-flexImages от разработчиков Pixabay. Она легковесная - весит всего 2кб.

Там же можно ознакомится с алгоритмом работы - меньше сотни строк кода (:

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.