让多个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元素的创建和初始位置的随机生成。
