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;
}

用正方形填充视口

1 个答案: