javascript - 如何在高度平衡的2列上列出元素？

我有一个文章列表，必须在两列上介绍。

一切都还好，除了文章的高度可以有很大的不同，结果是我的专栏可以比其他专栏更长。

这不是大问题，但结果并不干净。您可以看到所附的图片。

这是因为，在循环之前，我先统计所有文章，然后将结果除以2：

这是代码（我的模板中有些复杂，但只是html的东西）

// make a query to get the number of articles
$count_articles = 20;
$i = 0;

if ($i == 0) {
    echo '<div class="column_1">';
}

if ($i <= 10) {
    echo '<div style="float:left;width:350px;">';
    echo $articles
    echo '</div><div style="clear:both;"></div>';
    $i++;
}

if ($i == 11) {
    //close column_1, open column_2
    echo '</div><div class="column_2">';
}

if ($i >= 11 && $i <= 20) {
    echo '<div style="float:right;width:358px">';
    echo $articles
    echo '</div>';

    if ($i ==20) {
        //close column_2
        echo '</div>';
        }
    $i++;
}

您是否知道在我进行循环之前获取文章高度的方法，或者是另一种方法（可能使用JavaScript）？

最佳答案

因此，我只是快速地将一些东西放在一起以使用jQuery来做到这一点。可能需要一些工作来适应您的情况，但是基本想法似乎很好。

因此，基本上我在文章中都有一个<div>。然后每一列也都有一个<div>。像这样：

<div id="col1"></div>
<div id="col2"></div>
<div id="temp">
    <!--Articles Here-->
</div>

然后，我使用一些jQuery遍历每篇文章，检查每列的高度并将文章append()缩短到最短的列。

$( document ).ready(function() {

    $( ".article" ).each(function( index ) {
        var col1Height= $("#col1").height();
        var col2Height= $("#col2").height();

        if(col1Height < col2Height){
            $("#col1").append($(this));
        }else{
            $("#col2").append($(this));
        }
    });

});

这应该使列的高度相当均匀，而无需付出太多努力。我相信还有其他方法可以使列的高度更加接近，但是正如我所说，我认为这是一个很好的简单解决方案。

jsFiddle在这里：http://jsfiddle.net/4kpLr/1/