无缝响应式照片网格

假设您有一堆要显示的图片，目标是在浏览器窗口上无缝显示它们，没有任何间隙。只是因为您认为这样做很酷。它们的大小各不相同。您不在乎它们是否被调整大小，但它们应该保持其纵横比。 像这样

理想情况下，我们希望保持标记的简洁，例如

<section id="photos">
  <img src="images/cat-1.jpg" alt="Cute cat">
  <img src="images/cat-2.jpg" alt="Serious cat">
  ...
</section>

在没有任何 CSS 的情况下，图片会排成一行，因为它们本质上是内联块

大量空白

但这并不是我们想要的。您可能会直接想到一些 JavaScript 解决方案。可能是超级酷的 Masonry 项目。JavaScript 选项的问题在于它依赖于 window.resize 事件，而这个事件（至少对我来说）总是让页面感觉迟钝（即使您很时髦并且做了防抖动处理）。

我们可以使用纯 CSS 来实现我们想要的效果。我们需要的是用于放置图片的垂直列。这样，图片就会相互叠加，高度问题就不复存在了。

我们可以将相同数量的图片包装在浮动 div 中，但这很难保持平衡。诀窍在于使用 **Masonry CSS**，其中垂直列是通过 CSS3 属性 column-count 创建的。是的，就是那个可以自动将文本设置为窄列的东西。

因此，只要具有多个列的父元素与浏览器窗口一样宽（默认情况下），并且 column-gap 为 0，我们就可以轻松实现。通过将图片的宽度设置为 100%，它们将占用一列的全部宽度。

以下是 CSS 代码

#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;
}

但是当浏览器窗口变窄时会发生什么？5 列对于非常大的浏览器窗口可能很好，但对于较小的浏览器窗口来说可能太多了（5 张图片并排可能变得太窄）。我们可以通过使用媒体查询来测试浏览器宽度并相应地调整列数来轻松解决此问题。

@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;
  }
}

太棒了！

演示

查看 CodePen 上的 无缝响应式照片网格，由 CSS-Tricks (@css-tricks) 创建。

我认为这种技术很酷的一点是，因为它完全是 CSS，所以一切都非常流畅快捷。您可以随意调整浏览器大小，并观察内容快速调整大小和移动。

那，你知道。

就浏览器支持而言，它相当不错，除了 IE，它只在 10+ 版本中工作。否则：Firefox 3.6+、Opera 11.1+、Safari 4+、Chrome 10+。甚至可能更早一些版本。

您可能只会跳过回退，因为无论如何它并不是那么糟糕，只是有一些空白。或者您可以使用 Modernizr/YepNope 组合（Modernizr 可以测试 csscolumns）来加载 jQuery Masonry 并看看您能用它做些什么。或者您可以测试它并编写自己的 JS 代码，该代码计算图片数量并将它们分成相等组，然后用浮动 div 将它们包装起来。无论您喜欢什么。

超级可爱的猫！

完全正确。它们来自 LoremPixel。对于演示，我们使用 jQuery 随机抓取了不同尺寸的照片

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

for (var i = 0; i < 25; i++) {
  var width = getRandomSize(200, 400);
  var height =  getRandomSize(200, 400);
  $('#photos').append('<img src="//www.lorempixel.com/'+width+'/'+height+'/cats" alt="pretty kitty">');
}