CSS/JS/jQuery的 - 不同尺寸的浮动图像

Question

我需要以浮动的方式来显示图像 - 但他们在2种尺寸，具有4点较小的尺寸更大的一个，这里是一个视觉例如：

http://minus.com/lbfCTUyQj0BHcf

我继续使用Masonry，清凉插件在另一个SO问题的建议， 但我花了仅此而已：

http://minus.com/mkF3uSMeo/

正如你可以发ee仍然有空的空间。

任何想法如何去做到这一点？任何解决方案都有帮助，不管是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; 
}