如何确定动态填充浏览器窗口需要多少个正方形？

Question

我正在制作彩色正方形以填充浏览器窗口（例如，水平和垂直重复20px x 20px）。

有100种不同的颜色，每个链接指向一个不同的链接（与该颜色相关的博客文章）。

我想用每个彩色正方形至少填充一个浏览器窗口，然后根据需要重复填充该窗口，以便随着用户将窗口拖动得越来越大，整个背景上都有彩色正方形。

如果这些只是图像，则可以设置可重复的背景。 但是，我希望它们成为链接。 我不确定从哪里开始。 有什么想法，提示吗？

这是我正在工作的网站的链接： http : //spakonacompany.com/

我认为我在这里需要的最具体的部分是：如何使用jQuery通过浏览器窗口的大小（包括何时拖动，调整大小等）动态地计算出填充背景所需的重复方块数？

非常感谢。 :)

Answer 1

要获取浏览器的窗口宽度和高度，我使用此功能->

//checking if the browser is Internet Explorer    
var isIEX = navigator.userAgent.match(/Trident/);

var doc = isIEX ? document.documentElement : document.body;

function getwWH() {

var wD_ = window;

innerW = wD_.innerWidth || doc.clientWidth;
innerH = wD_.innerHeight || doc.clientHeight;

return {iW:innerW, iH:innerH}

}

还有一种本地方法可以检测何时调整浏览器窗口的大小，该方法适用于所有主要浏览器（包括IE 8，如果您打算支持它的话）->

window.onresize = function(){ 

//here goes the code whenever the window is getting resized

}

因此，为了定义填充窗口需要多少个正方形，您可以获取窗口的宽度并将其除以要用->填充窗口的正方形的宽度

//获得用于填充宽度和高度的正方形总数

width_ = getwWH().iW; //the width of the window

height_ = getwWH().iH; //the height of the window

如果您的正方形的宽度和高度是20乘以20，则我们可以通过将width_变量除以20（对height_相同）来计算每个窗口的正方形总数。

squaresPerWidth = width_/20;
squaresPerHeight = height_/20;

因此，每当我们调整浏览器窗口的大小时，我们都会执行此操作->

window.onresize = function(){

    width_ = getwWH().iW;
    height_ = getwWH().iH;

    squaresPerWidth = width_/20;
    squaresPerHeight = height_/20;

    //and the rest of the code goes here

}

还没有测试过，但是应该可以。

Answer 2

这是我鞭打的东西。 它使用固定数量的可调整大小的正方形，但是如果您需要固定大小的正方形，则只需将窗口设置为overflow: hidden并生成不合理的大量正方形。

var fillGrid = function(getColor, onClick) {
  var tenTimes = function(f){
    return $.map(new Array(10),
                 function(n, i) {
                   return f(i);
                 });
  };

  var DIV = function() {
    return $('<div></div>');
  };

  var appendAll = function(d, all) {
    $.map(all, function(e)  {
      d.append(e);
    });
    return d;
  };

  appendAll($('body'),
            tenTimes(function(col) {
              return appendAll(DIV().css({ height : "10%" }),
                               tenTimes(function(row) {
                                 return DIV().css({
                                   height : "100%",
                                   width : "10%",
                                   backgroundColor: getColor(row, col),
                                   'float' : "left"
                                 }).click(function() { onClick(row, col); });
                               }));
            }));
};

您必须提供两个功能，一个用于指定颜色，另一个在用户单击时调用。