Javascript jQuery避免容器重叠

我最近尝试开发一个jQuery插件，该插件用于在一个容器中随机分布大量容器，以便以后能够以一种特殊的方式设置它们的动画。你可以在这里看到我的尝试：

问题是，有些是重叠的，我不知道为什么。起初，我认为这样做的原因可能是$.each（）并不是在开始下一个循环之前等待一个循环完成，但我也尝试使用递归函数来解决这个问题，但没有帮助。我希望有人能给我一点推动，让我弄清楚问题到底出在哪里，提前谢谢！您可以在页面本身上看到代码，也可以只查看以下重要部分

---

此代码用于在所有元素上循环。这并不重要，但函数“NoCollision”试图确定该区域中是否存在元素。如果是，则返回false；如果可以使用空格，则返回true。如果无法使用该空间，将选择一些随机的其他坐标，然后重试

var Counter2 = 0;
    $(FlowContainer).children(':not(:last)').each(function(elem) {
        Counter2++;
        ElemNow = $(FlowContainer).children().eq(Counter2);
        ElemWidth = $(ElemNow).data("animwidth")
        ElemHeight = $(ElemNow).data("animheight")
        var Tries = 0;
        var TryNowX = ElemPrevLeft;
        var TryNowY = ElemPrevTop;
        while (!NoCollision(TryNowX, TryNowY, ElemWidth, ElemHeight, PositionsArray, Settings.MinSpreadX, Settings.MinSpreadY) && Tries <= Settings.MaxTries) {
            if (TryNowY < 15) {
                TryNowY += randomIntFromInterval(0, 10);
            } else if (TryNowY > (FlowContainer.height() - ElemHeight - 15)) {
                TryNowY += randomIntFromInterval(-10, 0);
            } else {
                TryNowY += randomIntFromInterval(-10, 10);
            }
            if (TryNowX < 15) {
                TryNowX += randomIntFromInterval(0, 10);
            } else if (TryNowX > (FlowContainer.width() - ElemWidth - 15)) {
                TryNowX += randomIntFromInterval(-10, 0);
            } else {
                TryNowX += randomIntFromInterval(-10, 10);
            }
            Tries++;
        }
        if (Tries == Settings.MaxTries) {
            console.log("Warning: Couldn't fit all elements - hiding some.")
            $(ElemNow).remove();
        } else {
            $(ElemNow).css({ top: TryNowY, left: TryNowX });
            ElemPrevLeft = TryNowX;
            ElemPrevTop = TryNowY;
            PositionArray = [TryNowY, TryNowX, ElemHeight, ElemWidth];
            PositionsArray[Counter2] = PositionArray;
        }
    })

---

我的想法是这样做。我这样做的方式是否有问题，或者我的实现是否有错误

---

我绝对感谢每一点帮助！提前谢谢

我终于解决了这个问题——我对重叠的计算有点错误，现在只需将&&（and）改为| |（or）-即可

---

使用另一个被引用的插件找到了更好的解决方案-现在效果更好。

强烈建议您摆脱在javascript中使用全局变量的习惯，养成使用

var

，

let

设置本地变量的习惯，

const

etc.使用这种糟糕的方法将遇到许多不可预测且难以调试的问题practice@charlietfl您好，谢谢您的反馈！我对这个很陌生，我会尽我最大的努力去学习。请您告诉我您到底在谈论哪些变量好吗？->除了“FlowContainer”变量外，没有一个全局变量，该变量实际上需要是全局变量。或者我需要在每一个变量的反换算前加上“var…”吗？谢谢你的帮助！上面代码中的每个变量声明都是全局的，因为您没有使用

var

或

let

@charlietfl好的，谢谢您-我不知道即使在函数中使用变量，我也必须使用“var”来不将其声明为全局的。我以后会记住这一点，并会尽快改变它，非常感谢！是的……没错……而且会导致很多难以发现的问题和可能的碰撞。如果初学者有一个重要的学习习惯，那就是始终在本地声明变量

function NoCollision(X, Y, W, H, PositionsArray, SpreadX, SpreadY) {
    var NoErrors = true;
    //Jedes Element im PositionsArray durchgehen und Prüfen
    $.each(PositionsArray, function(PositionArray) {
        var ArrY = PositionsArray[PositionArray][0];
        var ArrX = PositionsArray[PositionArray][1];
        var ArrW = PositionsArray[PositionArray][3];
        var ArrH = PositionsArray[PositionArray][2];
        if ((X < (ArrX - W - SpreadX) || X > (ArrX + ArrW + SpreadX)) && (Y < (ArrY - H - SpreadY) || Y > (ArrY + ArrH + SpreadY))) {
            //SHOULD BE OKAY HERE
        } else {
            NoErrors = false;
        }
    })
    return NoErrors;
}

PositionsArray[
    [Elem1PositionY, Elem1PositionX, Elem1Height, Elem1Width]
    [Elem2PositionY, Elem2PositionX, Elem2Height, Elem2Width]
]