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

Question

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

http://minus.com/lbfCTUyQj0BHcf

我继续使用 Masonry ，在另一个 SO 问题中建议的一个很酷的插件， 但我只花了到目前为止:

http://minus.com/mkF3uSMeo/

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

有什么想法可以解决这个问题吗？任何解决方案都有帮助，无论是 css、js、jquery - 还是其他一些库(我想我可以使解决方案适应 jquery)。

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

谢谢。

Answer 1

鉴于以下 html 结构(您可能会通过 jquery 添加类)，那么以下 css 似乎可以很好地实现您想要的( see 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;
}