如何用不同大小的图像创建网格?

2022-01-18 00:00:00 grid javascript html css photo-gallery

我正在尝试创建一个图像网格，其中一行的所有图像共享相同的高度，并且每行使用相同的宽度.

I'm trying to create a grid of images where all images of a row share the same height and where each row uses the same width.

我该怎么做?哪些库可以帮助我?

How can I do this and what libraries can help me?

推荐答案

这种类型的网格很难自己制作，所以最好不要重新发明轮子，而是使用互联网上很棒的人创建的很棒的库.

This type of grid are difficult to make by yourself so its better to not reinvent the wheel and use awesome libraries created by awesome people on the internet.

查看最适合您所寻找内容的链接 -->

Checkout this links which are best for what you are looking for -- >

  1. http://masonry.desandro.com/
  2. http://css-tricks.com/seamless-responsive-photo-grid/

还有这个链接 http://www.jqueryscript.net/tags.php?/grid%20layout/ 有各种可能有用的图像网格视图库..

Also this link http://www.jqueryscript.net/tags.php?/grid%20layout/ has a variety of those image grid view libraries which may be useful ..

事实上，CSS 技巧链接是一个免费的简单实现.我们的想法是将图像宽度设置为 100% 并将您的空间划分为列.

The CSS trick link is, in fact, a library free easy implementation. The idea is to set images width to 100% and divide your space into columns.

这是从上一个链接中提取的片段:

Here is a snippet extracted from the previous link:

function getRandomSize(min, max) {
  return Math.round(Math.random() * (max - min) + min);
}

var allImages = "";

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height = getRandomSize(200, 400);
  allImages += '<img src="https://placekitten.com/' + width + '/' + height + '" alt="pretty kitty">';
}

photos.innerHTML = allImages

.snippet-result-code {
  height: 500px
}

#photos {
  /* Prevent vertical gaps */
  line-height: 0;
  -webkit-column-count: 5;
  -webkit-column-gap: 0px;
  -moz-column-count: 5;
  -moz-column-gap: 0px;
  column-count: 5;
  column-gap: 0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
    -moz-column-count: 4;
    -webkit-column-count: 4;
    column-count: 4;
  }
}

@media (max-width: 1000px) {
  #photos {
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
  }
}

@media (max-width: 800px) {
  #photos {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (max-width: 400px) {
  #photos {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

body {
  margin: 0;
  padding: 0;
}

<section id="photos"></section>

相关文章