将列表包装成列

这里有另一种解决方案，可以实现以下样式的列式列表：

1.      4.      7.       10.
2.      5.      8.       11.
3.      6.      9.       12.

以下代码是纯JavaScript编写，需要jQuery，并且没有回退方案。

下面的代码修改了Array原型，增加了一个名为“chunk”的新函数，该函数将任何给定的数组分成指定大小的块。接下来有一个名为“buildColumns”的函数，该函数接受一个UL选择器字符串和一个数字，用于指定每列可以包含多少行。（这里是一个工作中的JSFiddle）

$(document).ready(function(){
    Array.prototype.chunk = function(chunk_size){
        var array = this,
            new_array = [],
            chunk_size = chunk_size,
            i,
            length;

        for(i = 0, length = array.length; i < length; i += chunk_size){
            new_array.push(array.slice(i, i + chunk_size));
        }
        return new_array;
    }

    function buildColumns(list, row_limit) {
        var list_items = $(list).find('li').map(function(){return this;}).get(),
        row_limit = row_limit,
        columnized_list_items = list_items.chunk(row_limit);

        $(columnized_list_items).each(function(i){
            if (i != 0){
                var item_width = $(this).outerWidth(),
                    item_height = $(this).outerHeight(),
                    top_margin = -((item_height * row_limit) + (parseInt($(this).css('margin-top')) * row_limit)),
                    left_margin = (item_width * i) + (parseInt($(this).css('margin-left')) * (i + 1));

                $(this[0]).css('margin-top', top_margin);
                $(this).css('margin-left', left_margin);
            }
        });
    }

    buildColumns('ul#some_list', 5);
});

由于我曾经遇到同样的问题并且找不到任何“干净”的解决方案，所以我想分享我的解决方案。在这个例子中，我使用了一个反向的while循环，因此我可以使用splice而不是slice。现在的优点是splice()只需要一个索引和一个范围，而slice()需要一个索引和总数。后者在循环时往往变得困难。

缺点是我需要在附加时反转堆栈。

示例：

cols = 4; liCount = 35

使用slice的for循环 = [0, 9]; [9, 18]; [18, 27]; [27, 35]

使用splice的反向while循环 = [27, 8]; [18, 9]; [9, 9]; [0, 9]

代码：

// @param (list): a jquery ul object
// @param (cols): amount of requested columns
function multiColumn (list, cols) {
    var children = list.children(),
        target = list.parent(),
        liCount = children.length,
        newUl = $("<ul />").addClass(list.prop("class")),
        newItems,
        avg = Math.floor(liCount / cols),
        rest = liCount % cols,
        take,
        stack = [];

    while (cols--) {
        take = rest > cols ? (avg + 1) : avg;
        liCount -= take;

        newItems = children.splice(liCount, take);
        stack.push(newUl.clone().append(newItems));
    }

    target.append(stack.reverse());
    list.remove();
}

ul.col {
    width:50%;
    float:left;
}

div.clr {
    clear:both;
}

HTML部分：

<ul class="col">
    <li>Number 1</li>
    <li>Number 2</li>

    <li>Number 19</li>
    <li>Number 20</li>
</ul>
<ul class="col">
    <li>Number 21</li>
    <li>Number 22</li>

    <li>Number 39</li>
    <li>Number 40</li>
</ul>