javascript - 如何不制作div堆栈？

Question

我正在使用此代码使图像和文本在屏幕上移动。我的问题是，有时图像和文本会相互重叠并堆叠在一起，我该如何做到这一点才能使其不可能相互重叠？

$(document).ready(function() {
  animateDiv('.a');
  animateDiv('.b');
  animateDiv('.c');
  animateDiv('.d');
  animateDiv('.e');
  animateDiv('.f');
  animateDiv('.g');
  animateDiv('.h');
  animateDiv('.i');
});

function makeNewPosition() {
  var h = $(window).height() - 60;
  var w = $(window).width() - 60;
  var nh = Math.floor(Math.random() * h);
  var nw = Math.floor(Math.random() * w);
  return [nh, nw];
}

function animateDiv(myclass) {
  var newq = makeNewPosition();
  $(myclass).animate({
    top: newq[0],
    left: newq[1]
  }, 2000, function() {
    animateDiv(myclass);
  });

};

div.a {
  width: 50px;
  height: 50px;
  position: fixed;
  color: Navy;
}

div.b {
  width: 50px;
  height: 50px;
  position: fixed;
  color: red;
}

div.c {
  width: 50px;
  height: 50px;
  position: fixed;
  color: Fuchsia;
}

div.d {
  width: 50px;
  height: 50px;
  position: fixed;
  color: SpringGreen;
}

div.e {
  position: fixed;
}

div.f {
  position: fixed;
}

div.g {
  position: fixed;
}

div.h {
  position: fixed;
}

div.i {
  position: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='a'>MOCKO</div>
<div class='b'>MOCKO</div>
<div class='c'>MOCKO</div>
<div class='d'>MOCKO</div>
<div class='e'><img src="image/image1.png"></div>
<div class='f'><img src="image/image2.png"></div>
<div class='g'><img src="image/image3.png"></div>
<div class='h'><img src="image/image4.png"></div>
<div class='i'><img src="image/image5.png"></div>

预先感谢，如果你能帮助我，请帮助我!我叫 Lukas，我不太擅长编码。

Answer 1

所以您实际上是在屏幕上随机放置固定元素，这就是它们偶尔会重叠的原因。

有几种不同的方法可以防止这种情况发生，但这取决于您的最终目标。

如果您真的想要无重叠的随机放置方法，则必须针对所有现有位置在 makeNewPosition 中运行检查以确定它们的坐标是否重叠，如果重叠则重新生成坐标。您需要确定新位置和旧位置的边缘，然后比较它们。

就我个人而言，我认为这将是一种脆弱且过于复杂的做事方式。我鼓励你看看随机生成以外的其他可能的解决方案，也许是不同的布局。

@hungerstar 也有很好的评论。这本质上是碰撞检测。它可以投入大量精力来做好这件事并回答您的特定问题。

这是一个有用的 SO 链接，它解释了一种基本方法:jQuery/JavaScript collision detection

这里是 jsfiddle 的工作示例:https://jsfiddle.net/ryanoc/TG2M7/

如果您愿意，我可以深入探讨具体用例。不确定要发布什么内容，因为我不确定您的最终目标是什么。