如何通过碰撞检测实现多个div元素在页面中随机布局且保持一定间隔？

<code class="javascript">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);
}</code>

<code class="javascript">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";
}</code>