javascript - 如何动态确定需要多少个方 block 来填充浏览器窗口？

Question

我正在制作彩色方 block 来填充浏览器窗口(例如，水平和垂直重复 20 像素 x 20 像素)。

有 100 种不同的颜色，每个链接指向不同的链接(与该颜色相关的博文)。

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

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

这是我正在处理的站点的链接:http://spakonacompany.com/

我认为我在这里需要的最具体的部分是:我如何确定重复填充背景所需的方 block 数，使用 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}

}

还有一种检测浏览器窗口何时调整大小的 native 方法，适用于所有主流浏览器(包括 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

如果您的方 block 的宽度和高度是静态的 20 x 20，那么我们可以通过将我们的 width_ 变量除以 20 来计算每个窗口的方 block 总数(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

}

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