无缝响应式照片网格

假设您有一堆要显示的图像，目的是使它们在浏览器窗口中边缘到边缘地无间隙。 只是因为您认为那很酷。 它们的大小各不相同。 您不在乎是否调整它们的大小，但是它们应该保持其纵横比。 像这样：

尼斯和无缝

理想情况下，我们使标记保持冷静，例如：

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

完全没有任何CSS，由于它们本质上是内联块，因此图像将连续排列：

空白的河流

但这不是我们想要的。 您可能会想到一些JavaScript解决方案。 可能是超酷的砌体项目。 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;
  }
}

Fannnnnncy。

演示版

请参阅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，该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">');
}

翻译自: https://css-tricks.com/seamless-responsive-photo-grid/