jquery - 将单个列表分成多列但不按顺序

Question

这是代码

var cols = 3;
var container = $('ul');
var items = container.find('li');
var itemsPerCol = Math.ceil(items.length / cols);
var stack = []; 
for (var i = 0; i < itemsPerCol; i++) {
    for (var k = 0; k < cols; k++) {
        stack.push(items[i + (itemsPerCol * k)]);
    }
}
items.css({
    float:'left',
    width:Math.floor(container.width() / cols)
});
container.html(stack).append($('<br>').css({clear:'both'}));

那里有 16 个列表，它不是按顺序排列的，但是当我进入 15 个列表时，它是按顺序排列的

这是演示

我只需要它尽可能有序，因为总是会添加一个列表。

Answer 1

尝试这个：

var cols = 3;
var container = $('ul');
var items = container.find('li');
var itemsPerCol = Math.ceil(items.length / cols);
var stack = []; 
var containerWidth = container.width();
for (var i = 0; i < itemsPerCol; i++) {
    for (var k = 0; k < cols; k++) {
        if((i + (itemsPerCol * k)) < items.length)
        {
            var item = items[i + (itemsPerCol * k)];
            item.style.width = containerWidth / cols + 'px';
            item.style.float = 'left';
            stack.push(item);    
        }
        else
        {
            var item = stack.pop(item);
            item.style.width = ((containerWidth / cols) * k) + 'px';
            stack.push(item);   
        }
    }
}

container.html(stack).append($('<br>').css({clear:'both'}));

小提琴