javascript - 显示动态增长的列表

Question

UPDATE1:更新了 JS fiddle 链接抱歉，设置的时间间隔没有按我希望的方式工作

我有一个动态增长的数组(数字每 1 秒添加一次)。我必须拆分此列表并将其显示在列中，我实际上在 ul 和 li 中显示列表时遇到问题(是的，只有 ul 和 li 没有表)。用户可以指定最大列数(一旦有这么多就停止添加列)和最小列高度(没有添加的列可能包含少于这么多的元素)。此外，任何添加的列中的元素数必须与前一列相同或少 1。最大列 =3 和最小列高 =3 的输出

到目前为止我能做的是:

1. 使用set interval每1秒加一次数

2. 将传入的数字放入数组中，如 [1] , [1,2] ... [1,2,3,4] 4秒后这个数组叫做range

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>'); 的事情were j 是 new_range 数组索引

我在显示 li 项时遇到问题，就像使用 CSS 的示例输出一样，如果有人能告诉我如何在每次迭代后并排显示 li 项，那就太好了

JS fiddle link

Answer 1

我发现你的 fiddle 太困惑了，所以我从头开始。

以下函数采用值数组 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() 或数组填充代码，因为这些都是无关紧要的:上面的函数总是根据传递的数组重绘所有列in.(我确实在我的演示 fiddle 中展示了间隔的东西。)