CSS：重新排列div元素

Question

我在容器中有多个<div>标记，但width但height不同。当浏览器resized和<div>元素重新排列时，它们之间会有很多空格。例如，以下HTML：

<div class="wrap">
    <div class="box">
        This has less height
    </div>
    <div class="box">
        This has more height
    </div>
    <div class="box">
        This has less height.
    </div>
</div>

现在当浏览器调整大小时，最后一个div将移动到第一个div下方的左侧，但是它们之间有空的空间，因为中间div有更多的高度。请看图片。

是否可以使用纯CSS安排这些div？我找不到方法，所以我尝试了jQuery masonry plugin，它运行正常，但问题是它通常不会很快响应（例如，当你第一次打开页面时，布局完全搞砸了，但如果你刷新页面就可以了。）

因此，如果仅使用CSS无法实现，有没有办法让它在没有复杂插件的情况下工作（例如仅使用jQuery？）

的jsfiddle： http://jsfiddle.net/HS2Zh/

Answer 1

如果你的任务是删除间隙，可以使用此代码删除它

            var h = 0;
            $('.box').each(function() 
            { 
                h = Math.max(h, $(this).height()); 
            }).height(h);

它将为所有.box类

指定唯一高度（.box的最大高度）

Answer 2

这可以通过使用jquery masonry插件来完成。希望此链接可以帮助您http://masonry.desandro.com/

如果你已经使用了这个插件，那么试着在这些块之间留出一些空隙，这样它就会有自由空间流动