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

当div击中底部时计算的最佳方法是什么？

1 个答案: