Question

当<div>到达用户页面末尾时，如何停止追加？{1}}？我是否必须构建一个固定宽度的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

Answer 2

#box div获取所有剩余位置时的半坏解决方案。附近另一个div的示例：

http://jsfiddle.net/naaj6/7/

$("#box").css({'height' : $(window).height() - $("#bigDiv").height() + 'px'});
if ($("#box").height() >= $(window).height() -40) clearInterval(crazyInterval);

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

2 个答案: