如何将单个列表（不同的文本长度）组成两个相等的列而不在列表项之间创建空的垂直空间？

Question

我必须处理通过php输出的动态代码，我只有css和javascript供我使用。

我有一列列表项（不使用

我需要分成两列（顺序无所谓）。 目前，我给每个项目一个'浮动：左;'的CSS。 和其他所有项目（使用javascript）一个'clear：left;'的CSS 并具有预定义的宽度，以便它们平均分成两列。

但问题是，在当前设置中，当左列上的列表项很高时，右侧较短的列表项会在其下方获得一个空的空白区域。

有没有办法将列表编码为两列而不创建任何不必要的垂直空间？

Answer 1

在div中堆叠列表中的元素。 然后弄乱持有列表的元素的高度。 现在在网站上创建一个新列表。 通过列表元素进行迭代并弄清高度+边距+等，直到列表项的高度大于列表项总高度的一半。

对于之后的每个元素，您将它们移动到新列表。

这是一个用mootools和小提琴写的简短例子，如果你想尝试一下。 它应该很容易转换为jQuery或纯JavaScript。 正如您所看到的，这可以更均匀地分布元素。

var height = $('wrapper').getCoordinates().height;
var listHeight = 0;

var leftColumn = new Element('ul', {class: 'list'});
var rightColumn = new Element('ul', {class: 'list'});

$$('#wrapper li').each(function(li){
   listHeight = listHeight + li.getSize().y;

    if (listHeight < height/2){
        leftColumn.grab(li);
    }
    else{
        rightColumn.grab(li);                                   
    }
});
var wrapper = $('wrapper');
wrapper.getChildren().destroy();
wrapper.grab(leftColumn);
wrapper.grab(rightColumn);

http://jsfiddle.net/7t324/1/

真正均匀的方式（没有打破列表项而不介意订单）如果你真的想要均匀分配（并且订单不重要）那么你可以对列表元素进行高度排序。 然后你向左边的ul添加一个元素，下一步是向右边的ul添加元素，直到它的高度大于左边。 然后你在左边做同样的事情，依此类推。

如果它的外观是偶数（以高度排序），您可以在添加之前更改列表项a的顺序。

Answer 2

这是一个小提琴。 既然你可以使用javascript我假设你可以加载jQuery。

http://jsfiddle.net/manishie/r4zkp/3/

HTML：

<div id="wrapper">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three three three three three three three three </li>
        <li>four</li>
        <li>five</li>
        <li>six</li>
        <li>seven</li>
    </ul>
</div>​

CSS：

.left_list, .right_list {
    float: left;
    width: 100px
}

使用Javascript：

$(function() {
    left_list = $('li:even');
    right_list = $('li:odd');
    $('#wrapper').html('');
    $('#wrapper').append('<div class="left_list">');
    $('.left_list').html(left_list);
    $('#wrapper').append('<div class="right_list">');
    $('.right_list').html(right_list);
});

​