Jquery 用正方形填充视口

我正在尝试获取视口的尺寸，然后填充正方形，以便它们完美地覆盖整个视口。一定有比我现在的代码更好的方法（见下文）。也许有一种方法可以为这行的分母找到一个容易整除的数字

var-boxWidthHeight=wrapperArea/30000

$(document).ready(function() {
    var wrapperWidth = $(window).width();
    var wrapperHeight = $(window).height();
    $('.wrapper').css('width', wrapperWidth);
    $('.wrapper').css('height', wrapperHeight);
    var wrapperArea = wrapperWidth * wrapperHeight;
    var boxWidthHeight = wrapperArea / 30000;
    var boxWidthHeight = parseInt(boxWidthHeight);
    var boxArea = boxWidthHeight * boxWidthHeight;
    var boxCount = wrapperArea / boxArea;
    for(var i = 0; i < boxCount; i++) {
        $('.wrapper').append('<div class="box"></div>');
    }
    $(".box").css({ width: boxWidthHeight, height: boxWidthHeight });
});

$（文档）.ready（函数（）{
var wrapperWidth=$（window.width（）；
var wrapperHeight=$（window.height（）；
$（'.wrapper'）.css（'width'，wrapperWidth）；
$（'.wrapper'）.css（'height'，wrapperHeight）；
var wrapperArea=wrapperWidth*wrapperHeight；
var boxWidthHeight=包装面积/30000；
var-boxWidthHeight=parseInt（boxWidthHeight）；
var boxArea=boxWidthHeight*boxWidthHeight；
var boxCount=包装面积/箱面积；
对于（变量i=0；i

JavaScript

 $(function() {

    var box_size = 20,
        wrapper = $('.wrapper'),
        x = Math.round( wrapper.width()/box_size ) + 
        (wrapper.width()%box_size ? 1 : 0),
        y = Math.round( wrapper.height()/box_size ) + 
        (wrapper.height()%box_size ? 1 : 0),
        html = '';

    for(var i = 0; i <= x*y; i++)
        html += '<div class="box"></div>';

    wrapper.hide().html('<div class="inner">'+html+'</div>');

    $('.inner', wrapper ).css({'width' : x*box_size , 'height' : y*box_size , 'overflow': 'visible'});

    $('.box', wrapper ).css({
        'background': '#ccc',
        'width': box_size - 2,
        'height': box_size - 2,
        'border': '#fff solid 1px',
        'float':'left',
        'clear': 'none'
    });

    wrapper.show();

});​

当用户调整浏览器大小时会发生什么？框的大小应该是多少。1px乘1px？@iambriansreed不，更大。40px x 40px如果这只是为了视觉效果，你可以直接使用CSS：有趣的问题，有趣的解决方案。采用灵活的盒子尺寸制作。这很好地覆盖了视口，但在我的用例中，单击每个.box会使该.box淡入淡出，以显示整个页面的背景图像。使用您的解决方案，该背景图像将不再可见。谢谢你@585也不知道你的问题中没有任何内容提及每个方框上的事件。你是在要求编码替代方案。我提供了一个。我知道，我想了解更多关于背景图像的情况。
<div class="wrapper"></div>​

.wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #333;
    overflow: hidden;
}