用于显示弹出网格的 Javascript 方程式

Question

我正在尝试打开队列中的所有弹出窗口，以便它们根据队列数组中的项目数量具有不同的大小和位置。当弹出窗口启动时，想法是它们将完全填满用户屏幕(使用 screen.width 和 screen.height)，无论打开 2 个弹出窗口还是 200 个。我已经计算出每个弹出窗口宽度的方程式，但是无法获得高度或顶部和左侧位置。我相信高度属性与屏幕纵横比 (screen.width/screen.height) 相关的宽度有关，但我可能错了。

这是代码，感谢您的帮助!

 var queue = [someUrl, someUrl, someUrl, someUrl];

 function popUp(){ //open popups

    var W=screen.width/Math.ceil(Math.sqrt(queue.length));

    for(i=0; i<queue.length; i++) {
        window.open(queue[i],i,'width='+W+',height='???',toolbar=0,
        menubar=0,location=0,status=0,scrollbars=0,resizable=0,left='???'
        ,top='???'');
    }
}

W*i 几乎适用于 left=，但是，一旦到达屏幕右侧，它就无法重新分布弹出窗口。或许条件语句可以用于 if (W*i>screen.width)。

Answer 1

查看旁边的相关问题，我发现答案(或多或少)是用另一种语言写的。诀窍是首先计算您的网格需要的行数和列数(基于数组的长度)，然后在一个循环内执行一个循环，其中第一个循环迭代您的行，第二个循环迭代您的列。

这是其他答案的 javascript 翻译

function popUp(){ 

    // calculate number of rows and columns 
    var cols = Math.ceil(Math.sqrt(queue.length));    
    var rows = Math.ceil(queue.length/cols);

    // calculate width and height based on number of cols && rows
    var W = screen.width / cols;
    var H = screen.height / rows;

    var item = 0; //item of the queue array

    for(i=0; i<rows; i++) {
        for(j=0; j<cols; j++) {

            window.open(queue[item],item,'width='+W+',height='+H+',toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left='+W*j+',top='+H*i+'');

            item++; //add 1 to item
            if(item >= queue.length) { break } //break out of loop once item reaches length of queue

        }                                            
    }
}

这个循环总是会创建一个完美的网格，这可能并不总是你想要的，如果你有奇数个项目，最后一行应该缺少一些单元格，但是这个 loop-ina-loop 会创建空弹出窗口以完成网格，这就是为什么我们添加最后一行以在项目 >= queue.length (即一旦你到达队列末尾)时跳出循环

更新:这是反向循环(这里比评论更容易阅读)

    for(i=rows-1; i>=0; i--) {
        for(j=cols-1; j>=0; j--) {
            //pop up code
        }                                            
    }