Лучший способ рассчитать, когда 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
    });
}