javascript - 根据窗口大小显示 div 的数量

Question

例如下图是在初始窗口位置..

当我减小窗口大小时，div 的数量应该相应地改变。

编辑：每个地图代表一个 Div。

Answer 1

获取地图大小：

var maps = document.getElementsByClassName('.map');
for(var i = 0; i < maps.length; i++){
    var map = maps[i];
    var rect = map.getClientRects()[0];
    map.left = rect.left;
    map.top = rect.top;
    map.width = rect.width;
    map.height = rect.height;
}

在屏幕调整大小事件中，您将在其中检查：

for(var i = 0; i < maps.length; i++){
    if(maps[i].left + maps[i].width > screen.width ||
       maps[i].top + maps[i].height> screen.height)
        maps[i].style.display = 'none';
    else
        maps[i].style.display = 'block';
}

没测试，希望能用

Answer 2

使用 jQuery，使用.resize方法检查窗口是否已调整大小，然后计算您要显示多少个 div（即窗口大小除以您的 div 大小）。获取窗口高度和宽度：

var h=$(window).height();   // returns height of browser viewport
var w=$(window).width();   // returns width of browser viewport

您可以使用.hide和.show很好地显示 div 的确切数量。