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

Question

我正在尝试将图像排列成一个整齐的网格，如截图中所示。图像来自CMS，因此它们可以是任何大小。

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

Answer 1

已经存在各种布局js库，如

1. Packery
2. Masonry
3. Gridster
4. Flex
5. Waterfall
6. Blockslt

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

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