用于显示弹出网格的Javascript公式

我试图从队列中打开所有弹出窗口,以便它们具有与队列数组中的项目数相关的不同大小和位置.当弹出窗口启动时,想法是它们将完全填满用户屏幕(使用screen.width和screen.height),无论是打开2个弹出窗口还是200个弹出窗口.我已经找出每个弹出窗口宽度的等式,但是没有能够高度或左上角和左上角.我相信height属性与宽度相关的屏幕宽高比(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 *我几乎适用于左=但是,一旦到达屏幕的右侧,它就无法重新分配弹出窗口.也许条件语句可以用于if(W * i> screen.width).

解决方法:

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

这是其他答案的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

        }                                            
    }
}

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

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

    for(i=rows-1; i>=0; i--) {
        for(j=cols-1; j>=0; j--) {
            //pop up code
        }                                            
    }
上一篇:javascript – 可以从页面级脚本调用在书签中定义的函数吗?


下一篇:android – 在弹出窗口中显示RecyclerView