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

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