en este archivo HTML, hay un par de divs que son absolutos
Quiero escribir un código en JavaScript que pueda decirme la fila de cada div. Cada vez que en los ejes verticales no hay un cuadro, hay una fila, para mí el problema es cómo puedo decirle a mi aplicación que "hay una fila".
aquí mi código HTML:
<html> <head> <style> .container { width : 1170px; margin : 0 auto; position : relative; } .box { position : absolute; background : red; width : 300px; height : 300px; color : #fff; font-size : 50px; } </style> </head> <body> <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> </body> </html>Quiero que mi código funcione con más o menos cuadros, así que creo que debería escribir una función, pero sin entender estas filas no puedo hacer eso... ¿Algún consejo?
Aquí hay un ejemplo simple, primero encuentra las alturas mínima y máxima de las filas y luego recorre todos los cuadros y si la altura del borde superior está entre la altura superior e inferior de una fila, asigna ese cuadro a esa fila, y obtendrá un objeto con las identificaciones de sus cajas y las filas en las que se encuentran: (los números de fila comienzan en 0, usé la posición de la matriz para obtenerlo, pero puede asignar cualquier número que desee al crear la matriz de filas) aquí hay una salida de muestra:
[ { "box": "box1", "row": 0 }, { "box": "box2", "row": 0 }, { "box": "box3", "row": 3 }, { "box": "box4", "row": 1 }, { "box": "box5", "row": 2 } ] let boxes = document.getElementsByClassName("box"); // construct an array with the rows function getRow(fromHeight) { const o = {}; for (var i = 0; i < boxes.length; i++) { const boxRect = boxes[i].getBoundingClientRect(); if ((!o.top || o.top > boxRect.top) && boxRect.top > fromHeight) { o.top = boxRect.top; o.bottom = boxRect.bottom; } } return o; } let rows = []; let fromHeight = 0; for (var i = 0; i < boxes.length; i++) { let row = getRow(fromHeight); if (Object.keys(row).length !== 0) rows.push(row); fromHeight = row.bottom; } // console.log(rows); // get array with every box row let array = []; for (var i = 0; i < boxes.length; i++) { const boxRect = boxes[i].getBoundingClientRect(); var row = rows.findIndex(p => p.top <= boxRect.top && p.bottom >= boxRect.top); array.push({box:boxes[i].id, row: row}); } console.log(array); <html> <head> <style> .container { width: 1170px; margin: 0 auto; position: relative; } .box { position: absolute; background: red; width: 300px; height: 300px; color: #fff; font-size: 50px; } </style> </head> <body> <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> </body> </html>