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 数を適切に表示できます。