用正方形填充視口

Question

我想獲取視口的尺寸，然後填充它的正方形，以便它們完美覆蓋整個視口。必須有比我現在的代碼更好的方式（如下）。也許有一種方法可以爲這條線的分母​​找到一個易於分割的數字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 }); 
}); 

Answer 1

http://jsfiddle.net/iambriansreed/nwPy5/

的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(); 

});​ 

HTML

<div class="wrapper"></div>​ 

CSS

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