主页 / 问题 / 1296919
Accepted
Floyat
Asked:2022-06-19 17:36:12 +0000 UTC2022-06-19 17:36:12 +0000 UTC

图像的马赛克布局

  • 772

任务是用马赛克将图像排成一排，就像他们在freepik.com上所做的那样：

在此处输入图像描述

特点：

  • 图像总是填满屏幕的整个宽度
  • 图像排成一行，每行具有不同的高度
  • 图像按照从服务器接收到的顺序排列。图像没有被打乱。
  • 图像的高度、宽度不是随机选择的，而是尽可能优化
  • 弹性，不是绝对定位
  • 最初，图像的路径及其尺寸（宽度、高度）是已知的
  • 原始图像是正方形或矩形，所有图像的宽度始终相同（如 freepic - 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>

javascript

2 个回答

  1. 这是一个示例，说明如何在一行中制作两个元素，例如（适合小视口）。所以应该有一种算法，根据容器的宽度考虑连续的几个图像，同时考虑到可能的图像缩小限制。如果没有，则连续少一张图像。

    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>

    • 5
  2. Best Answer

    freepik.com使用来自Pixabay 开发人员的flexImages 开源 JavaScript 库。它是轻量级的 - 仅重 2kb。

    在那里您还可以熟悉工作算法 - 不到一百行代码（：

    • 3

相关问题