Лучший способ рассчитать, когда div попадает в дно?

Question

У меня есть приложение, которое динамически генерирует div-поля. Ящики перекрывают друг друга и перемещаются на 15 пикселей вниз и вправо.

Однако, когда нижняя часть окна попадает в нижнюю часть страницы, я хочу, чтобы следующий ящик отображался вверху страницы. То же самое происходит, когда правая сторона окна попадает в правую сторону страницы (т. Е. Ящики не могут выйти за пределы страницы).

Ниже мой код, но он не работает, как я хочу. Ящики получают «вне границ» с правой стороны, прежде чем поворачиваться на левую сторону, а относительно дна это тоже не так. Я думаю, есть лучший способ добиться этого, я просто не знаю, что это такое.

var win = $('<div/>', { 
    'class': 'window', 
    'width': this.width, 
    'height': this.height 
}).appendTo('#container'); 

var containerHeight = $('#container').height(); 
var maxBottom = (desktopHeight/2); 

var containerWidth = $('#container').width(); 
var maxRight = desktopWidth; 

var prev = win.prev('.window'); 
if (prev.length > 0) { 

    win.offset({ 
    left: prev.offset().left + 15, 
    top: prev.offset().top + 15 }); 

    if (prev.offset().top >= maxBottom){ 
     win.offset({ 
      top: 10 
     }); 
    } 
    if (prev.offset().left >= maxRight){ 
     win.offset({ 
      left: 0 
     }) 
    } 
} 

Answer 1

Вы можете проверить, если .offset().top свойства элемента плюс элемент .height() равен или больше, чем .height(), если документ:

var myBox = $('#my-box'), 
    bHeight = myBox.height(), 
    wHeight = $(window).height(), 
    bWidth = myBox.width(), 
    wWidth = $(window).width(); 

if (myBox.offset().top + bHeight >= wHeight) { 
    myBox.css({ 
     top : 0 
    }); 
} 

if (myBox.offset().left + bWidth >= wWidth) { 
    myBox.css({ 
     left : 0 
    }); 
}