最近，公司要做一个类似挖矿的项目，大概其是当用户登录进入首页后，如果用户有已经生成的原力值，则在其点击原力值后可以类似蚂蚁森林那样收集原力值，当用户将所有的原力值收集完毕后开始提醒用户新的原力值正在生成中，待新的原力值生成后，用户可以继续以上的操作收集原力值。如下图：

以上是一种逻辑，还有一种是当用户前一天有剩余的原力值没有收集时，在第二天收集完当天的已生成的原力值后，前一天的原力值还可以出现在页面当中继续供用户收集（具体的情况，看你公司的实际业务需求，比如可以设置三天内的原力值都能收集，也可以设置两天内的原力值可供收集等）。

本文不考虑后端业务逻辑的实现，只分享前端多个原力值在页面中的随机不重叠分布的实现方法，在此之前，我本来想参考网易星球的实现方法（算法），但人家的是APP的项目，根本看不到具体是如何实现的，后来又参考了其他的实现方法，发现其虽然也是有一定的随机性，但元素距离左边的距离其实是固定死的，只有距离顶部的距离是随机的，而且元素基本上就是只分两行随机分布。如下图：

圆圈1那个圆其实永远都在第一行的第一个位置，其唯一变化的就是它距离顶部的距离，其他的圆圈也是类似，这样给人的效果就不理想。再后来，也参考过其他的一些写法，效果都不好。那么，以下就是本篇博客所要实现的代码，妥妥滴的满足了开发的需要：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover">

<title>js多个元素随机且不重叠分布在页面中</title>

<script>

//计算根节点HTML的字体大小

function resizeRoot(width) {

    var deviceWidth = document.documentElement.clientWidth,

        num = width,

        num1 = num / 100;

    if (deviceWidth > num) {

        deviceWidth = num;

    }

    document.documentElement.style.fontSize = deviceWidth / num1 + "px";

}

//根节点HTML的字体大小初始化

resizeRoot(750);

window.onresize = function () {

    resizeRoot(750);

};

</script>

<style>

*{margin:0;padding:0;}

.demo{height:5rem;position:relative;}

img{width:.8rem;height:.8rem;position:absolute;border-radius:50%;}

</style>

</head>

<body>

    <div class="demo"></div>

    <script>

        createBubble(10);   //初始化气泡

        function createBubble(num){

            var iconWidth = 60;   //值越大，元素左右间隔越大

            var iconHeight = 60;  //值越大，元素上下间隔越大

            var targetHeight = document.querySelector(".demo").offsetHeight;

            var targetWidth = document.querySelector(".demo").offsetWidth;

            var _tmpArray = [];

            var html = '';

            //当放置的元素的宽高大于浏览器窗口的宽高时，直接返回

            if(targetWidth < iconWidth || targetHeight < iconHeight){

                return false;

            }

            var xNum = parseInt(targetWidth / iconWidth, 10);    //用浏览器的宽度除以一个元素的宽度可算出浏览器窗口内一行可以放置元素的个数

            var yNum = parseInt(targetHeight / iconHeight, 10);  //用浏览器的高度除以一个元素的高度可算出浏览器窗口内一列可以放置元素的个数

            var allNum = xNum * yNum;   //浏览器窗口内总共可以放置元素的个数

            //当需要放置的元素的个数超过浏览器窗口内总共可以放置的元素的个数时，则返回

            if(num >= allNum){

                return false;

            }        

            for(var i = 0; i < allNum; i++){

                _tmpArray.push(i);

            }

            var xStart = 0, yStart = 0;

            while(num){

                var pointer = Math.floor(Math.random() * allNum);    //向下取整取出0到allnum之间的任意一个整数

                //如果数组_tmpArray中不存在第pointer值，则继续

                if(!_tmpArray[pointer]){

                    continue;

                }

                delete _tmpArray[pointer];   //删除数组_tmpArray中第pointer个值

                yStart = parseInt(pointer / xNum, 10) * iconWidth;

                xStart = (pointer % xNum) * iconHeight;

                html += "<img src='http://tp1.sinaimg.cn/1642634100/50/5613120647/0' style='top:" + yStart + "px;left:" + xStart + "px'/>";

                num--;

            }

            document.querySelector(".demo").innerHTML = html;

        }

    </script>

</body>

</html>

本文代码参考自：https://segmentfault.com/q/1010000000188540

js多个元素随机且不重叠分布在页面中的更多相关文章

  1. js将数组元素随机排序的方法

    在群里看见的一个面试题,试了一下,还是可以做出来的,但是需要查资料,主要是岁一些方法了解的不清楚,可能这个跟我平时不太注重基础理论有关系,像什么构造函数啊,我根本就不关心什么叫构造函数,我一直都以为我 ...

  2. 原生js实现多个随机大小颜色位置速度小球的碰壁反弹

    文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...

  3. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  4. js改变HTML元素的值

    js改变HTML元素的值(常用,备忘) <!DOCTYPE html> <html> <body> <h1>我的第一段 JavaScript</h ...

  5. JS控制HTML元素的显示和隐藏

    JS控制HTML元素的显示和隐藏 利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: 1 2 ...

  6. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  7. JS1 js获取dom元素方法

     js获取dom元素方法  1.通过ID选取元素(getElementById) 1)使用方法:document.getElementById("domId")         其 ...

  8. 使用JS控制伪元素的几种方法

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":b ...

  9. 使用原生JS定位网页元素

    约定:1.<meta name="viewport" content="width=device-width">这种标记简称"wdw&qu ...

随机推荐

  1. JavaScript设计模式之一封装

    对于熟悉C#和Java的兄弟们,面向对象的三大思想(封装,继承,多态)肯定是了解的,今天我想讲讲如何在Javascript中利用封装这个特性,开讲! 我们会把现实中的一些事物抽象成一个Class并且把 ...

  2. Unsupported major.minor version 51.0 错误解决方案

    jdk1.6工程中使用外部jar包中类出现:Unsupported major.minor version 51.0原因分析:出现上述错误是因为:外部jar包使用jdk1.7(jdk7)编译,而使用此 ...

  3. JVM-GC工作原理

     配置Garbage Collection 2012-09-17 14:53:18 分类: Java   上面这幅图是我从网络上摘到的,它展现了在一个的理想系统的模型下GC对系统的影响.图的最顶上红色 ...

  4. JavaScript对象添加、删除、修改对象的属性

    https://www.cnblogs.com/goweb/p/5357640.html 利用动态特性 function Person(){}; var person = new Person(); ...

  5. Redis实现简单消息队列

    http://www.jianshu.com/p/9c04890615ba 任务异步化 打开浏览器,输入地址,按下回车,打开了页面.于是一个HTTP请求(request)就由客户端发送到服务器,服务器 ...

  6. echarts实现中国地图数据展示

    在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...

  7. python3学习笔记2---引用http://python3-cookbook.readthedocs.io/zh_CN/latest/2

    2018-03-01数据结构和算法(2) 1.6字典中的键映射多个值 一个字典就是一个键对应一个单值的映射.如果你想要一个键映射多个值,那么你就需要将这多个值放到另外的容器中, 比如列表或者集合里面. ...

  8. 妙用this关键字

    妙用this关键字 ## this关键字一般this关键字都是指的是对象的本身,在类的所有方法.构造器都可以拿到this引用,这是jvm"偷偷"帮我们传递进来的引用,指向调用方法对 ...

  9. (汇总)os模块以及shutil模块对文件的操作

    ''' # os 模块 os.sep 可以取代操作系统特定的路径分隔符.windows下为 '\\' os.name 字符串指示你正在使用的平台.比如对于Windows,它是'nt',而对于Linux ...

  10. 请求转发(forward)和重定向(redirect)的区别

    转发不会改变地址栏,重定向会. 转发是请求一次,重定向请求两次. 转发过程中只有一个request对象产生,重定向是两个. 转发不能转发到站外,重定向可以发送到站外. 重定向的第2个请求的请求方式是什 ...