jQueryコンテナのオーバーラップを避ける

Question

最近、コンテナに一定量のコンテナをランダムに広げて後で特別な方法でアニメーションできるようにするために使用されるjQuery-Pluginで作業を試みました。あなたは私のここでの試行を見ることができます：

問題は、それらのいくつかは重複しており、私は理由を理解できません。最初は、$ .each（）が次のループを開始する前に1つのループを終了するのを待っていないのですが、再帰関数を使って解決しようとしました。私は、誰かが私に問題を実際にどこにあるのか理解してもらうために少し前進してくれることを願っています。コード自体をページ上に表示したり、次の重要な部分を見てみたりできます。

---

このコードは、すべての要素をループするために使用されます。これはそれほど重要ではありませんが、関数 "NoCollision"は、要素がその領域に存在するかどうかを調べようとしています。 trueの場合は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] 
] 

---

私の考えは、このようにそれを行うことでした。私がそれをやり遂げるやり方に何か問題がありますか、私の実装に間違いがありますか？

Image

私は助けのすべてのビットのために絶対に感謝しています！前もって感謝します！

Answer 1

私は最後に問題を解決しました - オーバーラップの計算が少し間違っていましたが、ちょうど& &（および）を||に変更しなければなりませんでした。 （または） - 魅力のように今働く。

他のプラグインで参照されているプラ​​グインを使用して、より良い解決策を見つけました。stackoverflow-thread - 今のところうまくいきます。