如何用不同尺寸的图像创建网格？

Question

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

我该怎么做以及哪些图书馆可以帮助我？

Answer 1

这种类型的网格很难自己制作,因此最好不要重新发明轮子并使用互联网上令人敬畏的人创建的真棒库.

查看此链接最适合您所需的内容 - >

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

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

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

以下是从上一个链接中提取的代码段:

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>