jQuery的避免重複集裝箱

我最近想上這是用來傳播集裝箱量隨機在一個容器事後能夠動畫他們以特殊的方式一個jQuery的插件工作。你可以看到我的努力在這裏：http://www.manuelmaurer.at/randposplugin.php jQuery的避免重複集裝箱

的問題是，他們中的一些是重疊的，我想不通爲什麼。起初我以爲這樣做的原因可能是$。每個（）不是正在等待一個循環來啓動下一個之前完成，但我也試圖解決在使用遞歸函數 - 沒有幫助。我希望有人能給我一點點推動，找出問題的實際位置，在此先感謝！您可以在頁面上看到代碼，或者查看以下重要部分。

此代碼用於遍歷所有元素。這並不重要，但是如果某個元素存在於該區域，「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] 
]

我的想法是做這樣的。我做這件事的方式有什麼問題嗎？或者在我的實施中出現錯誤？

Image

我的幫助每一位絕對的感謝！提前致謝！

來源

2017-04-08 Blackbird

強烈建議你擺脫使用全局變量的一切，你在JavaScript做的，在使用'var'，'let'，'const'等都會遇到很多不可預測的和硬的設置本地的習慣得到的習慣使用這種可憐的做法調試問題 – charlietfl

@charlietfl您好，感謝您的反饋！我對此很新，並盡我所能去學習它。你會如此善意地告訴我你正在談論哪些變量？ - >除了「FlowContainer」-Variable之外，沒有一個全球性的全球性企業。或者我需要在每個變量聲明之前放置「var ...」？謝謝你的幫助！ – Blackbird

上面的代碼中的每個變量聲明都是全局的，因爲您不使用'var'或'let' – charlietfl

我終於解決了這個問題 - 我的重疊計算有點不對，只能將& &（和）更改爲||。（或） - 現在就像魅力一樣。

找到使用這是另一個stackoverflow-thread引用的插件更好的解決方案 - 現在的方式更好的作品。

來源

2017-04-11 12:48:27 Blackbird

jQuery的避免重複集裝箱

回答

相關問題