Question

我最近尝试使用jQuery-Plugin，它用于在容器中随机分布一定数量的容器，然后以特殊方式为它们设置动画。您可以在此处查看我的尝试：http://www.manuelmaurer.at/randposplugin.php

问题是，其中一些是重叠的，我无法弄清楚原因。起初我认为原因可能是$ .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;
        }
    })

如果可以使用空格，实际检查将参与NoCollision-Function，您可以在以下代码中看到。

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

我用来保存所有已经定位的div的坐标的数组看起来像这样。

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

我的想法就是这样做。我的方式有问题还是我的实施中有错误？

我非常感谢你的每一点帮助！提前谢谢！

Answer 1

我终于解决了这个问题 - 我对重叠的计算有点不对，只需改变＆amp;＆amp; （和）到|| （或） - 现在就像魅力一样。

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

jQuery避免重叠容器

1 个答案: