CSS / JS：不同高度的浮动块元素？

Question

这就是我的工作。

如您所见，我有很多块元素，我想分成五列。

但是，由于它们的高度不同，因此它们对漂浮的反应不佳。 （因此，页面中间有一个大洞。）

我知道我已经看到了JS解决方法，该方法可以计算高度并将元素放置在合适的位置，但是我现在还无法找到它-有人记得它，或者有其他想法吗？ ;）

Answer 1

也许您想要的是： http : //desandro.com/resources/jquery-masonry/

它是可配置的。

Answer 2

您实际上可以通过简单地为每5个具有clear:both风格的浮动元素放置一个块来纠正您的情况clear:both

例：

<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<article class="bloggpost"></article>
<div style='clear:both'></div>

Answer 3

如果您不介意依靠JS进行适当的布局，为什么不设置五个<div>元素（如列），每个元素都具有一定的宽度（您可以给它们一个HTML类，然后在需要时动态设置它们的宽度）选择）？ 您可以合计块元素的高度，然后使用JS告诉它要放入每列<div> 。 这可以动态处理onresize事件。 该代码将非常易于编写，如果您使用的是jQuery，则更是如此。

Answer 4

如果您不介意每个元素的高度都与最高高度相同，请尝试以下功能（jquery）：

function evenHeights(element) {
    var x = 0;
    $(element).each(function(){
        var h = $(this).height();
        if (h > x) x = h;
    });

    $(element).each(function() {
        var thumbHeight = x;
        $(this).height(thumbHeight);
    });
}

并调用evenHeights($(".bloggpost")); 在$(document).ready(function()