javascript - CSS / JS / jQuery - 不同大小的浮动图像

Question

我需要以浮动方式显示图像 - 但它们有 2 种尺寸，较大的有 4 种较小的尺寸，这是一个视觉示例：

http://minus.com/lbfCTUyQj0BHcf

我继续使用Masonry，这是另一个 SO question 中建议的一个很酷的插件，但我只花了这么长时间：

http://minus.com/mkF3uSMEo/

如您所见，仍有空白空间。

任何想法如何去做？任何解决方案都有帮助，无论是 css、js、jquery - 甚至是其他一些库（我认为我可以将解决方案调整为 jquery）。

目标是没有空白空间，但所有东西都被填满 - 布局应该保持流动/液体。

谢谢。

Answer 1

鉴于以下 html 结构（您可能会通过 jquery 添加类），那么以下 css 似乎可以很好地实现您想要的效果（参见 fiddle；目前仅在 IE7-9 中测试）：

HTML

<img class="half top" />
<img class="half" />
<img class="full" />

CSS

.half,
.full {
    float: left;    
    margin: 0 10px 10px 0;
}

.half {
    width: 40px;
    height: 60px;
}

.full {
    width: 90px;
    height: 130px;
}

.half.top + .half {
    margin-left: -50px;
    margin-top: 70px;
}