JS实现在某一区域中多个元素随机显示且不重叠

已于 2023-02-08 15:14:18 修改
阅读量1.6k 收藏 10
点赞数 1
分类专栏： javaScript 文章标签： javascript 前端 css html
于 2023-02-08 11:27:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47610038/article/details/128931572
版权

文章目录

前言

如何实现在某一区域中多个元素随机显示且不重叠?
在这里插入图片描述

一、实现方案

  • 随机数
    根据生成的随机数设置div容器的top、left值；
  • 碰撞检测
    检测两个元素直接是否存在重叠；

二、主要代码

  • 设置div的 top、left
 		/***
         * @name computed
         * @description 计算每个盒子的left top
         * @params divArr 随机布局的div数组
         */
        function computed(divArr) {
          maxDimensions = getMaxDimension(divArr);
          var widthBoundary = maxDimensions.maxWidth;
          var heightBoundary = maxDimensions.maxHeight;

          for (var i = 0; i < divArr.length; i++) {
            rDivLeft = getRDivNumber(
              widthBoundary,
              window.innerWidth - widthBoundary
            );
            rDivTop = getRDivNumber(
              heightBoundary,
              window.innerHeight - heightBoundary
            );
            divArr[i].style.left = rDivLeft + "px";
            divArr[i].style.top = rDivTop + "px";
          }
          examineEach();
        }
        computed(allDiv);
  • 碰撞检测
		/***
         * @name isCollision
         * @description a,b为两个任意盒子，检测其是否碰撞
         * @params a
         * @params b
         * @return Boolean
         */
        function isCollision(a, b) {
          var a_l = a.offsetLeft; // a_l为a盒子左侧偏移量
          var a_t = a.offsetTop; // a_t为a盒子顶部偏移量
          var a_r = a_l + a.offsetWidth; // a_r为a盒子右侧距页面左侧的距离
          var a_b = a_t + a.offsetHeight; // a_b为a盒子底部距页面最顶端的距离
          var b_l = b.offsetLeft; // b_l等为b盒子 同上解释
          var b_t = b.offsetTop; // b_t为b盒子顶部偏移量
          var b_r = b_l + b.offsetWidth; // b_r为b盒子右侧距页面左侧的距离
          var b_b = b_t + b.offsetHeight; // b_b为b盒子底部距页面最顶端的距离

          if (b_r < a_l || b_b < a_t || a_r < b_l || a_b < b_t) {
            // 当满足此条件时，没有发生碰撞，此时返回值为false没有检测到碰撞
            return false;
          } else {
            // 否则为true，即发生碰撞
            return true;
          }
        }
		/***
         * @name examineEach
         * @description 检查每一个盒子之间是否重叠
         */
        function examineEach() {
          maxFrequency += 1;
          for (var i = 0; i < allDiv.length; i++) {
            for (var j = i + 1; j < allDiv.length; j++) {
              if (isCollision(allDiv[i], allDiv[j]) && maxFrequency < 9000) { // maxFrequency 避免无限循环
                // 如果重叠 再次计算位置
                computed([allDiv[i], allDiv[j]]);
              }
            }
          }
        }

三、完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多个元素随机定位显示且不重叠</title>
  </head>
  <style>
    .rDiv {
      width: 60px;
      height: 60px;
      position: absolute;
      text-align: center;
      color: #fff;
      font-size: 20px;
    }

    .rDiv1 {
      background-color: pink;
      width: 100px;
      height: 150px;
    }

    .rDiv2 {
      background-color: skyblue;
      width: 80px;
      height: 140px;
    }

    .rDiv3 {
      background-color: goldenrod;
      width: 70px;
      height: 120px;
    }

    .rDiv4 {
      background-color: sandybrown;
      width: 120px;
      height: 180px;
    }

    .rDiv5 {
      background-color: silver;
      width: 160px;
      height: 200px;
    }
    .rDiv6 {
      background-color: slategray;
      width: 200px;
      height: 280px;
    }
    .rDiv7 {
      background-color: blanchedalmond;
      width: 300px;
      height: 200px;
    }
    .rDiv8 {
      background-color: cyan;
      width: 260px;
      height: 180px;
    }
  </style>
  <body>
    <div class="rDiv rDiv1">Div1</div>
    <div class="rDiv rDiv2">Div2</div>
    <div class="rDiv rDiv3">Div3</div>
    <div class="rDiv rDiv4">Div4</div>
    <div class="rDiv rDiv5">Div5</div>
    <div class="rDiv rDiv6">Div6</div>
    <div class="rDiv rDiv7">Div7</div>
    <div class="rDiv rDiv8">Div8</div>
    <button onclick="javascript:window.changePosition()">点击随机位置</button>
  </body>
  <script>
    var allDiv = document.getElementsByClassName("rDiv");
    var maxFrequency = 0; // 计算的最大次数

    function changePosition() {
      /***
       * @name getMaxDimension
       * @description 返回div的最大宽度和最大高度
       * @params divArr div数组
       * @return Object
       */
      function getMaxDimension(divArr) {
        var maxWidth = 0;
        for (var i = 0; i < divArr.length; i++) {
          if (divArr[i].offsetWidth > maxWidth) {
            maxWidth = divArr[i].offsetWidth;
          }
        }
        var maxHeight = 0;
        for (var i = 0; i < divArr.length; i++) {
          if (divArr[i].offsetHeight > maxHeight) {
            maxHeight = divArr[i].offsetHeight;
          }
        }
        var values = { maxWidth: maxWidth, maxHeight: maxHeight };
        return values;
      }

      /***
       * @name getRDivNumber
       * @description 返回一个任意的随机数
       * @params min
       * @params max
       * @return Number
       */
      function getRDivNumber(min, max) {
        return Math.random() * (max - min) + min;
      }

      /***
       * @name isCollision
       * @description a,b为两个任意盒子，检测其是否碰撞
       * @params a
       * @params b
       * @return Boolean
       */
      function isCollision(a, b) {
        var a_l = a.offsetLeft; // a_l为a盒子左侧偏移量
        var a_t = a.offsetTop; // a_t为a盒子顶部偏移量
        var a_r = a_l + a.offsetWidth; // a_r为a盒子右侧距页面左侧的距离
        var a_b = a_t + a.offsetHeight; // a_b为a盒子底部距页面最顶端的距离
        var b_l = b.offsetLeft; // b_l等为b盒子 同上解释
        var b_t = b.offsetTop; // b_t为b盒子顶部偏移量
        var b_r = b_l + b.offsetWidth; // b_r为b盒子右侧距页面左侧的距离
        var b_b = b_t + b.offsetHeight; // b_b为b盒子底部距页面最顶端的距离

        if (b_r < a_l || b_b < a_t || a_r < b_l || a_b < b_t) {
          // 当满足此条件时，没有发生碰撞，此时返回值为false没有检测到碰撞
          return false;
        } else {
          // 否则为true，即发生碰撞
          return true;
        }
      }

      /***
       * @name computed
       * @description 计算每个盒子的left top
       * @params divArr 随机布局的div数组
       */
      function computed(divArr) {
        var	maxDimensions = getMaxDimension(divArr);
        var widthBoundary = maxDimensions.maxWidth;
        var heightBoundary = maxDimensions.maxHeight;

        for (var i = 0; i < divArr.length; i++) {
          let rDivLeft = getRDivNumber(
            widthBoundary,
            window.innerWidth - widthBoundary
          );
          let rDivTop = getRDivNumber(
            heightBoundary,
            window.innerHeight - heightBoundary
          );
          divArr[i].style.left = rDivLeft + "px";
          divArr[i].style.top = rDivTop + "px";
        }
        examineEach();
      }
      computed(allDiv);

      /***
       * @name examineEach
       * @description 检查每一个盒子之间是否重叠
       */
      function examineEach() {
        maxFrequency += 1;
        for (var i = 0; i < allDiv.length; i++) {
          for (var j = i + 1; j < allDiv.length; j++) {
            if (isCollision(allDiv[i], allDiv[j]) && maxFrequency < 9000) {
              // maxFrequency 避免无限循环
              // 如果重叠 再次计算位置
              computed([allDiv[i], allDiv[j]]);
            }
          }
        }
      }
    }
    changePosition();
  </script>
</html>

四、最终效果

在这里插入图片描述

五、总结

  • 父级盒子
    当前是以浏览器的窗口宽高作为父级盒子的尺寸，若是想自定义父级盒子尺寸
    可将 computed 函数中的 window.innerWidth 和 window.innerHeight 修改成对应的和盒子的宽高
    例如：
		for (var i = 0; i < divArr.length; i++) {
          let rDivLeft = getRDivNumber(
            widthBoundary,
            document.getElementById("box").offsetWidth - widthBoundary
          );
          let rDivTop = getRDivNumber(
            heightBoundary,
            document.getElementById("box").offsetHeight - heightBoundary
          );
          divArr[i].style.left = rDivLeft + "px";
          divArr[i].style.top = rDivTop + "px";
        }
  • 存在问题
    父级容器尺寸较小的时候可能会出现无限循环的现象，导致内存溢出

在这里插入图片描述

  • 解决办法
    这个问题暂时还没找到好的解决办法
    暂定方法：添加 maxFrequency字段，根据个人需求，判断循环次数，避免内存溢出
哦呀ooo
关注
专栏目录
不重叠随机圆的JAVASCRIPT程序实现
MAILLIBIN的专栏
12-15 5871
最近在设计一个游戏，游戏中需要随机生成森林树木，如何让树木显得随机自然确实是个难题。一个是树木的大小需要随机，然后是树木的位置需要随机，这两个是关键，其它诸如颜色、形状等等属性的变化则不是大问题。 至于将不同大小的树木种植到平地上的问题其实可以简化为在一个平面上摆放互不重叠的随机大小的圆。 具体实现思路： 1. 建立一个n,n的矩阵作为树木可能出现的坐标地图。 2.
js实现固定区域内的不重叠随机圆
热门推荐
charming的博客
07-16 1万+
关键词：js、固定区域、不重叠、随机圆，半径固定、半径随机 最近公司有一个需求就是在一个固定的区域（500X500）内显示10个圆，且半径固定，而且不重叠 因为圆的个数固定，而且半径固定，那么就有可能会没有解决方案。 不过其实也没有很难，处理好半径的最大值就好了。 思路： （固定半径） step1：先在区域内生成一个随机的圆心坐标， step2：然后拿一个固定半径（从大到小拿固定...
js多个元素随机且不重叠分布在页面中
weixin_34378922的博客
05-25 6574
最近，公司要做一个类似挖矿的项目，大概其是当用户登录进入首页后，如果用户有已经生成的原力值，则在其点击原力值后可以类似蚂蚁森林那样收集原力值，当用户将所有的原力值收集完毕后开始提醒用户新的原力值正在生成中，待新的原力值生成后，用户可以继续以上的操作收集原力值。如下图： 以上是一种逻辑，还有一种是当用户前一天有剩余的原力值没有收集时，在第二天收集完当天的已生成的原力值后，前一天的原力值还可以出现在...
原生js动态创建小卡片并显示在屏幕的随机位置(附备注)
ramosTears123的博客
04-05 1662
效果图: 源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin: 0 au...
js实现随机散列排布元素
qq_34102856的博客
12-28 939
github地址 web 端实现在盒子类将指定的子节点随机排列，并不重叠 使用方法 hashPosition 函数 参数 1：dom 对象 参数 2：数字时表明排列子元素宽高一样 只针对圆时一样，正方形时宽高都应该是正方形宽的根号 2 倍，参数为对象时 width： 指定子元素宽高固定 minWidth,maxWidth在子元素宽高在范围内时使用 space：指定子元素最小间隔，默认在为最大宽度的0.2倍 宽高一样的圆排列时 demo： hashPosition(document.getElementBy
使用 js 实现 一个按椭圆 随机 分布的效果
qq_42174597的博客
07-06 507
实现 一个按椭圆 随机 分布的效果
vue 随机显示数组的其中一个_Vue.js：多个输入中的v-model数组
weixin_35399228的博客
12-31 279
I have an input text field with a v-model attached, and every time someone hits the "Add" button, another input text get added to the DOM with the same v-model attached. I thought I'd then get an arra...
vue中如何实现在某一区域中多个元素随机定位显示且不重叠给出示例并判断不能重叠
06-03
在vue中，可以使用CSS的`position: absolute`和JavaScript的随机数生成来实现在某一区域中多个元素随机定位显示且不重叠。 下面是一个示例代码： HTML： ```html , left: item.left + 'px' }"> ``` CSS： ``...
随机生成多个不重叠圆圈 纯javascript
最新发布
qq_34164814的博客
01-25 620
随机生成多个不重叠圆圈 纯javascript。
js 生成指定范围内不重复的随机数（前端蓝桥杯模拟题）
qq_55665718的博客
03-16 3500
题目要求： 封装函数，函数名 getRandomNum(min,max,countNum) 生成 min~max 范围的 countNum 个不重复的随机数，存入数组并返回。 下面是给定的index.html 文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="./js/i
【JavaScript】生成指定范围内多个不重复的随机整数
qq_40205510的博客
11-09 841
用于生成指定范围内多个不重复的随机整数。只需将所需范围的大小传递给。函数，它将返回一个包含指定范围内多个不重复随机整数的数组。用于生成指定范围内的随机整数，
JS_固定区域内的不重叠随机圆，随机气泡，固定区域、不重叠、随机圆，半径固定、半径随机
小歪博客
04-07 950
关键词：js、固定区域、不重叠、随机圆，半径固定、半径随机 需求在一个固定的区域（500X500）内显示10个圆，且半径固定，而且不重叠 因为圆的个数固定，而且半径固定，那么就有可能会没有解决方案。 不过其实也没有很难，处理好半径的最大值就好了。思路： 固定半径随机半径
js实现图片的随机定位但不超出可视区域
JackieDYH的博客
04-04 1714
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} span{ position: absolu...
随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用
a_靖的博客
12-18 6684
先看看效果图所要实现的功能看看代码js代码讲解：下面看看完整代码吧 所要实现的功能 在页面上随机的位置显示随机大小的图片，并且每个图片不能重叠，完整实现代码。 看看代码 注：该代码是在微信小程序写的demo，因为没有使用框架的API，所以该代码的逻辑在h5或者小程序，任何地方都适用。 js代码讲解： list（初始化的数组） 和 arr（在初始化的基础上加上了随机定位的数据和随机的宽高） 是界面要遍历的数组，决定图片渲染数量，这个值也可以改成从后端获取。 最终的数据格式 max 是图片最大值，min
js随机圆与矩形功能
温壁
10-27 376
1、节点操作版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DOM节点操作版本</title> </head> <style> *
JS如何让数组中的元素随机展示
jakelihua
02-23 254
首先我们需要第一个数组，然后获取这个数组的长度，根据这个长度，结合random函数，获取随机的索引值，然后再定义一个根据数组索引，交换元素位置的函数，就可以实现了。循环遍历进行随机排序，这里涉及到了floor向下取整，Math.random()是产生一个0到1之间的随机小数，向下取整。简介：在网站的图片显示，抽奖，作品展示这些方面，都存在着，随机打乱数组中的元素的功能。获取数组长度，定义索引。
JS学习——案例：随机谚语·五角星评分·计算器
2301_79729136的博客
01-22 521
随机谚语、五角星评分、计算器
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值