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

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/有各种可能有用的图像 GridView 库..

---

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>