js多个元素随机摆放
效果：
代码：
<!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://blog.csdn.net/weixin_34378922/article/details/93432361
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现