计算div何时触底的最佳方法？

Question

我有一个应用程序动态地生成div盒。这些盒子互相重叠，并向下移动15px并向右移动。

但是，当箱子的底部碰到页面的底部时，我希望下一个箱子在页面的顶部打开。当一个盒子的右侧碰到页面的右侧时也是如此（即盒子不应该出现在页面之外）。

下面是我的代码，但它不起作用，因为我想要的。这些盒子在左侧出现之前会在右侧出界，并且底部也不是很正确。我想有更好的方法来实现这一点，我只是不知道它是什么。

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 
    }); 
}