显示动态增长的列表

Question

UPDATE1：更新了JS小提琴链接抱歉设置间隔无法正常工作

我有一个动态增长的数组（每1秒增加一个数字）。我必须拆分这个列表并将其显示在列中，我实际上有问题显示ul和li中的列表（是的只有ul和li没有表）。用户可以指定最大列数（一旦有这么多就停止添加列）和最小列高（没有添加列可能包含少于这么多项）。此外，任何添加列中的项目数必须与上一列相同，或者比前一列少1。 max column = 3和min column height = 3

的输出

到目前为止我能做的是：

1. 使用设置间隔每1秒添加一次数

2. 4秒后将传入的号码放入[1] , [1,2] ... [1,2,3,4]这样的数组中。此数组称为范围

3. 将主数组（范围）拆分为子数组（ new_range ），例如，如果主数组

   （范围）= [1,2,3,4,5,6,7,8,9,10]

   new_range（在第一次循环之后）= [1,2,3,4]

   new_range（在第二次循环之后）= [5,6,7]

   new_range（在第3次循环之后）= [8,9,10]

4. 所以现在我需要使用ul和li垂直显示每个新范围所以我尝试做类似$('ul').append('<li>' + new_range[j] + '</li>');的事情，其中​​j是new_range数组索引

我有问题显示彼此相邻的li项目，就像使用CSS的示例输出一样，如果有人能告诉我如何在每次迭代后显示li项目，那就太棒了

JS fiddle link

Answer 1

我发现你的小提琴太混乱了，所以我从零开始。

以下函数采用一组值data，最大列数cols以及每列的最大大小size。如果data的值超过cols * size，则不会显示剩余时间。它创建列作为单独的ul元素，每个元素都附加到一个容器，该容器被认为存在于id“container”中（函数所做的第一件事就是将容器清空）。

function createList(data, cols, size){
    var $ul,
        $container = $("#container").empty();

    $.each(data, function(i,v){
        if (i >= cols * size)
            return false;
        if (i%size === 0)
            $ul = $("<ul/>").appendTo($container);

        $ul.append($("<li/>").html(v));
    });
}   

ul元素可以用这个CSS并排显示（即作为列）：

ul { float : left; }

使用setInterval()：http://jsfiddle.net/VXAHy/1/

为数组添加值的工作演示

我的答案中没有显示任何setInterval()或数组填充代码，因为这完全不相关：上面的函数总是根据传入的数组重绘所有列。（我做在我的演示小提琴中显示间隔内容。）