如何使用CSS创建不同大小的图像网格而无间隙？

Question

我想显示一个图像网格。每行（包含在div中）跨越屏幕的整个宽度，每个图像占据行宽度的三分之一。我用以下CSS实现了这一点。

img {
    max-width: 33.33%;
}

然而问题是因为图像具有不同的高度，每行具有行中最高图像的高度。结果，在不同行的图像之间存在垂直间隙。我想这样做，如果在图像上方有垂直空间，它会自动向上移动以填充该空间，依此类推下面的图像可以产生这种效果。

目前我正在使用JavaScript进行此操作，改变每个图像的相对位置以填充上面的空间并获得一些成功。但我相信有一种纯粹的CSS方式来实现这一目标。