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

Question

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

我有一列列表项（不使用

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

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

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

Answer 1

将列表中的元素堆叠在一个 div 中。然后确定保存列表的元素的高度。现在在网站上创建一个新列表。遍历列表元素并弄乱高度+边距+等，直到列表项的高度大于列表项总高度的一半。

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

这是一个用 mootools 编写的简短示例，如果您想尝试一下，请使用 fiddle。转换为 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 添加元素，直到它的高度大于左侧。然后你对左边做同样的事情，依此类推。

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

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);
});

​