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