根據窗口大小顯示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的確切數目。