Javascript 使浮动图像具有相同的边距

有没有简单的方法可以使浮动图像与上面的图像具有相同的边距

我有一个40多个图像的容器。所有图像的宽度相同，但高度不同。当页面加载时，它们看起来很好，但是调整浏览器的大小会使图像与高度更大的图像保持一致，因此一行可能只有一个图像，而很多图像是空的。我想要的是图像在垂直方向上有相同的空间

下面是一个JSFIDLE：

我能想到的唯一方法是将容器定位为相对位置，将图像定位为绝对位置，并使用Javascript根据容器的宽度计算图像的列数，将高度总和存储在数组中，然后使用它放置下一个图像。 我可能可以做到这一点，但我正在寻找一个更简单的解决方案

谢谢

<style type="text/css">
    #container{overflow: hidden;}
    #container > img{
        float: left;
        width: 200px;
        /* height varies for images */
    }
</style>
<div id="container">
    <img src="" />
    <!-- more images -->
    <img src="" />
</div>

#容器{溢出：隐藏；}
#容器>img{
浮动：左；
宽度：200px；
/*高度因图像而异*/
}

您可以使用：

display: inline-block;
vertical-align: top;

---

或者将

垂直对齐

更改为

中间对齐

或

底部对齐

，具体取决于您希望它们对齐的方式。

使用类。它们允许你将样式应用于同一类的多个元素。每个图像都有不同的高度，在这种情况下，我需要给它们中的每一个设置不同的页边距顶部，但仍然会在某些行中留下较少的图像。或者你的意思是我应该对这些类做些别的事情？如果你给你的每个图像一个

foo

类，那么你可以用CSS对它们应用一种样式，

.foo{property:value}

谢谢，这正是我想要的：）