Javascript 显示动态增长的列表

UPDATE1:JS fiddle-link-sorry-set-interval更新的时间间隔没有按我所希望的那样工作

我有一个动态增长的数组（每1秒添加一个数）。我必须拆分此列表并将其显示在列中，实际上，我在ul和li中显示列表时遇到问题（仅限ul和li否表）。用户可以指定最大列数（一旦有这么多列，就停止添加列）和最小列高度（添加的列中可能包含的项目数都不能少于这么多）。此外，任何添加列中的项数必须与上一列相同，或比上一列少1项。最大列=3和最小列高=3的输出

到目前为止，我所能做的是：

使用“设置间隔”每1秒添加一次数字

将传入的数字放入一个数组，如

[1]、[1,2]。。。[1,2,3,4]

4秒后。此数组称为范围

将主阵列（范围）拆分为子阵列（new_range），例如如果主阵列

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

新的_范围（第一次循环后）=[1,2,3,4]

新的_范围（第二次循环后）=[5,6,7]

新的_范围（第三次循环后）=[8,9,10]

所以现在我需要使用ul和li垂直显示每个新范围，所以我尝试了类似于

$（'ul'）的操作WARE j是新的_范围数组索引

我无法像使用CSS的示例输出那样将li项相邻显示，如果有人能告诉我如何在每次迭代后将li项相邻显示，那就太好了

---

我发现你的小提琴太让人困惑了，所以我从零开始

下面的函数获取一组值，

数据

，最大列数，

cols

，以及每列的最大大小，

size

。如果

data

的值大于

cols*size

值，则不显示剩余值。它将列创建为单个ul元素，每个ul元素都附加到一个容器中，该容器被假定为id为“container”（函数首先要做的是清空该容器）

使用

setInterval（）

向数组添加值的工作演示：

---

在我的回答中，我没有在这里显示任何

setInterval（）

或数组填充代码，因为这都是不相关的：上面的函数总是根据传入的数组重新绘制所有列。（我确实在我的演示小提琴中展示了音程。）

我发现你的小提琴太令人困惑了，所以我从零开始

下面的函数获取一组值，

数据

，最大列数，

cols

，以及每列的最大大小，

size

。如果

data

的值大于

cols*size

值，则不显示剩余值。它将列创建为单个ul元素，每个ul元素都附加到一个容器中，该容器被假定为id为“container”（函数首先要做的是清空该容器）

使用

setInterval（）

向数组添加值的工作演示：

---

在我的回答中，我没有在这里显示任何

setInterval（）

或数组填充代码，因为这都是不相关的：上面的函数总是根据传入的数组重新绘制所有列。（我确实在我的演示提琴中展示了间隔内容。）

将每一列创建为单独的ul元素（使用CSS将它们并排放置）是一个可接受的解决方案吗？将每一列创建为单独的ul元素（使用CSS将它们并排放置）是一个可接受的解决方案吗？

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 { float : left; }