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

How can I determine how many squares are needed to fill a browser window, dynamically?

本文关键字：窗口 浏览器 多少 正方形 填充 何动态 动态      更新时间：2023-09-26

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

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

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

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

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

我认为我需要的最具体的一点是：如何使用jQuery来确定填充背景所需的重复正方形数量，jQuery可以使用浏览器窗口的大小来动态计算，包括拖动、调整大小等？

非常感谢。：）

要获取浏览器的窗口宽度和高度，我使用这个函数->

//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，那么我们可以通过将宽度_变量除以20（与高度_来计算每个窗口的正方形总数

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
}

还没有测试过，但这应该有效。

这是我想出的东西。它使用固定数量的可调整大小的正方形，但如果您需要固定大小的正方形时，只需将窗口设置为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); });
                               }));
            }));
};

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

相关文章：