I am attempting to make a webpage that randomly positions divs across the page on loading without them overlapping. I found code online that does exactly what I want it to, (Linked Here) but I am having issues with the code. I copied all of the components from the above link into a pre-existing site, but it does not work. All of the divs appear to be overlapping in the top right corner of the page. I would appreciate any help in making this feature work, as I would love to use it on a website I am working on.
HTML:
<!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>test</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
</head>
<body>
<div class="random">Div 1</div>
<div class="random">Div 2</div>
<div class="random">Div 3</div>
<div class="random">Div 4</div>
<div class="random">Div 5</div>
<div class="random">Div 6</div>
<div class="random">Div 7</div>
<div class="random">Div 8</div>
<div class="random">Div 9</div>
<div class="random">Div 10</div>
<div class="random">Div 11</div>
<div class="random">Div 12</div>
</body>
</html>
CSS:
.random {
position: absolute;
margin: 2;
border: 1px solid black;
font-size: xx-large;
top: 0px;
left: 0pc;
}
.placed {
color: red;
border: 1px solid red;
}
JS:
;(() => {
"use strict";
const TRIES_PER_BOX = 50;
const randUint = range => Math.random() * range | 0;
const placing = [...document.querySelectorAll(".random")].map(el => Bounds(el, 5));
const fitted = [];
const areaToFit = Bounds();
var maxTries = TRIES_PER_BOX * placing.length;
while (placing.length && maxTries > 0) {
let i = 0;
while (i < placing.length) {
const box = placing[i];
box.moveTo(randUint(areaToFit.w - box.w), randUint(areaToFit.h - box.h));
if (fitted.every(placed => !placed.overlaps(box))) {
fitted.push(placing.splice(i--, 1)[0].placeElement());
} else { maxTries-- }
i++;
}
}
function Bounds(el, pad = 0) {
const box = el?.getBoundingClientRect() ?? {
left: 0, top: 0,
right: innerWidth, bottom: innerHeight,
width: innerWidth, height: innerHeight
};
return {
l: box.left - pad,
t: box.top - pad,
r: box.right + pad,
b: box.bottom + pad,
w: box.width + pad * 2,
h: box.height + pad * 2,
overlaps(bounds) {
return !(
this.l > bounds.r ||
this.r < bounds.l ||
this.t > bounds.b ||
this.b < bounds.t
);
},
moveTo(x, y) {
this.r = (this.l = x) + this.w;
this.b = (this.t = y) + this.h;
return this;
},
placeElement() {
if (el) {
el.style.top = (this.t + pad) + "px";
el.style.left = (this.l + pad) + "px";
el.classList.add("placed");
}
return this;
}
};
}
})();
Aucun commentaire:
Enregistrer un commentaire