将不同大小的图像整齐排列成网格答案

【问题标题】：Neatly arrange different sized images into a grid将不同大小的图像整齐排列成网格
【发布时间】：2015-06-04 13:56:25
【问题描述】：

我正在尝试将图像排列成一个整齐排列的网格，就像屏幕截图中一样。图片来自 CMS，因此可以是任意大小。

如何使用 CSS 或 JS 完成这项工作？

【问题讨论】：

标签： css image grid

【解决方案1】：

已经有各种布局js 库，比如

您可以查看how to replicate pinterest.com's absolute div stacking layout

【讨论】：

我不相信这些都提供了我想要的效果。我的图像可以是任意大小，但这些示例中的图像始终是固定宽度。 1/4 1/3 1/2
检查packery.metafizzy.co/methods.html中的附加方法插入的图像大小可变，直接codepen链接codepen.io/desandro/full/HFbia
他们仍在使用相同的宽度组，例如20% 50% 100% 等等。多想这个似乎很复杂，甚至是不可能的。我只需要满足于使用 Packery。感谢您的帮助！

【解决方案2】：

试试这个，希望这会有所帮助。只需在您选择的图像之间添加边距即可。

<div id="image-container">
    <img src="http://fakeimg.pl/300/">
    <img src="http://fakeimg.pl/250x100/">
    ...
</div>

#image-container {
  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; 
}

【讨论】：

很好的答案，一旦容器已满，有没有办法使溢出滚动垂直而不是水平？（假设您的容器的宽度/高度设置为 300px X 300px）