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的避免重复集装箱

回答

相关问题