javascript - リストアイテム間に空の垂直スペースを作成せずに、1つのリスト（さまざまなテキストの長さ）を2つの等しい列にするにはどうすればよいですか？

Question

phpを介して出力されている動的コードを処理する必要があり、使用できるのはcssとjavascriptだけです。

リストアイテムの列が1つあります（使用していません）

タグ）2つの列に分割する必要があります（順序は関係ありません）。現在、私はすべてのアイテムに「float：left;」のcssを与えました。そして他のすべてのアイテム（javascriptを使用）は'clear：left;'のcssです。幅が事前に定義されているため、2つの列に均等に分割されます。

ただし、現在の設定では、左側の列のリストアイテムが高い場合、右側の短いリストアイテムの下に空白が空くという問題があります。

不要な垂直方向のスペースを作成せずに、リストを2つの列にコーディングする方法はありますか？

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に1つの要素を追加します。次のステップは、高さが左側よりも大きくなるまで、右側の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);
});

​