JS随机布局div元素，避免碰撞

本文讲解如何使用JavaScript实现多个div元素在网页中随机布局并保持一定间距。通过碰撞检测算法`isCollision`判断div元素是否重叠，若发生碰撞，则调用`adjustPosition`函数随机调整div元素的位置，确保元素间保持预设距离，避免重叠。该方法结合了随机定位、碰撞检测和位置调整三个步骤，最终实现div元素在页面内的随机且有序分布。文章还简要介绍了更高级的优化方向，例如考虑元素大小和页面尺寸等因素，并提示读者需补充完整代码以实现完整功能。

让多个div元素在页面中随机分布并保持间距

本文将改进现有代码，实现div元素的碰撞检测，确保随机布局时元素之间保持一定的距离。

随机定位：

（此处应补充原代码的随机生成div元素位置部分，例如使用JavaScript生成随机的top和left值，并将其应用于div元素的样式。）

碰撞检测：

对每个div元素，检查其是否与其他所有div元素发生碰撞。

（此处应补充原代码的碰撞检测循环部分。）

碰撞判断：

对于矩形div，可以通过判断其四个顶点是否与其他矩形的区域相交来判断碰撞。

function isCollision(ele1, ele2) {
  const rect1 = ele1.getBoundingClientRect();
  const rect2 = ele2.getBoundingClientRect();

  // 检查矩形是否重叠
  return !(rect1.right < rect2.left || 
           rect1.left > rect2.right || 
           rect1.bottom < rect2.top || 
           rect1.top > rect2.bottom);
}

位置调整：

如果发生碰撞，则调整div元素的top和left属性，使其移到不发生碰撞的位置。调整方向可以随机选择，同时确保元素仍然停留在页面内。

function adjustPosition(ele, distance = 10) { // 添加默认间距参数
  let top = parseInt(ele.style.top.replace("vw", ""));
  let left = parseInt(ele.style.left.replace("vw", ""));

  // 随机选择调整方向
  const direction = Math.random();

  if (direction < 0.25 && top + distance < 100) { // 限制在页面内
    top += distance;
  } else if (direction < 0.5 && top - distance > 0) {
    top -= distance;
  } else if (direction < 0.75 && left + distance < 100) { // 限制在页面内
    left += distance;
  } else if (left - distance > 0) {
    left -= distance;
  }

  ele.style.top = top + "vw";
  ele.style.left = left + "vw";
}

通过结合以上步骤，即可实现多个div元素在页面中随机布局且保持一定间隔的效果。 请注意，这只是一个基本的碰撞检测和位置调整方案，实际应用中可能需要根据具体需求进行更复杂的处理，例如考虑元素大小、页面大小等因素，以及更高级的碰撞检测算法。 同时，补充完整的代码，包括div元素的创建和初始位置的随机生成。

今天关于《JS随机布局div元素，避免碰撞》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！