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

Question

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

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

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

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

这是我正在开发的网站的链接：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 x 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); });
                               }));
            }));
};

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