如何將單個列表（不同的文本長度）組成兩個相等的列而不在列表項之間創建空的垂直空間？

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

​