javascript - 达到用户的特定页面宽度时如何停止追加？

Question

如何停止附加 <div>是什么时候到达用户页面的末尾？我是否必须构建一个固定宽度的 div 作为可以找到浏览器默认窗口设置的容器？

$(document).ready(function () {

var color_array = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
var randColor = color_array[Math.floor(Math.random() * color_array.length)];

setInterval(function() {
        for (i = 1; i <= 5; i++) {
            $("#box").append("<div style='background-color:" + randColor + "; height:20px; width:20px; float:left;'></div>"); 
            randColor = color_array[Math.floor(Math.random() * color_array.length)]; }
        }, .000001);
});

Answer 1

(box = document.getElementById('box')).style.display = 'table'; //Shrink-wrap
while (box.offsetWidth < innerWidth) {
    box.innerHTML += "<div style='background-color:" + color_array[Math.floor(Math.random() * color_array.length)] + "; height:20px; width:20px; float:left;'></div>"; //No need for a randColor var
}
box.style.display = ''; //Get rid of inline styles