Tengo 5 etiquetas div con position: absolute en un contenedor con position: relative . Quiero saber el número de fila de cada div.
¡La posición div es dinámica y puede moverse a otra fila cambiando izquierda, arriba, ...!
¿Cómo puedo configurar 5 filas y mostrar el número de fila de cada div en cada momento?
.container { width: 1170px; margin: 0 auto; position: relative; } .box { position: absolute; background: red; width: 300px; height: 300px; color: #fff; font-size: 50px; } <div class="container"> <div class="box" style="top: 20px; left: 30px" id="box1">box1</div> <div class="box" style="height:100px; top: 90px; left: 530px" id="box2">box2</div> <div class="box" style="top: 1450px; left: 230px" id="box3">box3</div> <div class="box" style="top: 550px; left: 630px" id="box4">box4</div> <div class="box" style="top: 950px; left: 130px" id="box5">box5</div> </div>Aquí hay un comienzo
Deberá ver si los cuadros adyacentes están a la altura uno del otro si quiere decir que el cuadro 1 y el 2 están en la misma fila.
De lo contrario, la matriz ordenada muestra la parte superior de cada cuadro en orden
const rows = [...document.querySelectorAll(".container .box")].map(box => ({ id: box.id, top: parseInt(box.getBoundingClientRect()["top"]), bottom: parseInt(box.getBoundingClientRect()["bottom"])})).sort((a,b)=>a.top-b.top) console.log(rows) .container { width: 1170px; margin: 0 auto; position: relative; } .box { position: absolute; background: red; width: 300px; height: 300px; color: #fff; font-size: 50px; } <div class="container"> <div class="box" style="top: 20px; left: 30px" id="box1">box1</div> <div class="box" style="height:100px; top: 90px; left: 530px" id="box2">box2</div> <div class="box" style="top: 1450px; left: 230px" id="box3">box3</div> <div class="box" style="top: 550px; left: 630px" id="box4">box4</div> <div class="box" style="top: 950px; left: 130px" id="box5">box5</div> </div>