#javascript #html
Вопрос:
в этом HTML-файле есть несколько разделов, которые являются абсолютными
Я хочу написать код на JavaScript, который может указать мне строку каждого div. Всякий раз, когда в вертикальных осях у нас нет коробки, есть строка, для меня проблема в том, как я могу сообщить своему приложению «есть строка»!
вот мой HTML-код:
lt;htmlgt; lt;headgt; lt;stylegt; .container { width : 1170px; margin : 0 auto; position : relative; } .box { position : absolute; background : red; width : 300px; height : 300px; color : #fff; font-size : 50px; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="container"gt; lt;div class="box" style="top: 20px; left: 30px" id="box1"gt;box1lt;/divgt; lt;div class="box" style="height:100px; top: 90px; left: 530px" id="box2"gt;box2lt;/divgt; lt;div class="box" style="top: 1450px; left: 230px" id="box3"gt;box3lt;/divgt; lt;div class="box" style="top: 550px; left: 630px" id="box4"gt;box4lt;/divgt; lt;div class="box" style="top: 950px; left: 130px" id="box5"gt;box5lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Я хочу, чтобы мой код работал с большим или меньшим количеством полей, поэтому я думаю, что должен написать функцию, но без понимания этих строк я не могу этого сделать… Есть какие-нибудь советы?
Комментарии:
1. Вы должны начать с формального определения того, что такое a
row, — тогда вы сможете проверить, в какой «строке» находится любой данный DIV.2. Да, но это именно моя проблема. Я не знаю, каким способом лучше определить строку для этого приложения. должен ли я сказать, что любое вертикальное свободное пространство между этими ящиками-это строки или другой способ? Даже если это лучший подход, я не нашел лучшего способа сделать это :’)
3. Как насчет определения некоторых строк, которые начинаются с верхней границы первого поля и заканчиваются на его нижней границе, получите эти высоты, и это ваша первая строка, и учтите, что все остальные поля, у которых есть верхняя граница внутри этой строки, находятся в этой строке, чем получите верхнюю границу следующего поля, которое находится под первой строкой, и создайте свою вторую строку.. и так далее
4. Ну, определения проблем, как правило, являются чисто математической проблемой, поэтому не имеет значения, новичок ли вы в программировании, если вы хорошо разбираетесь в математике. Вы можете начать с бумаги, с системы координат Декарта, и попытаться выразить свою логику в виде одного или нескольких математических уравнений.
5. @Габриэль О! это решение интересно для меня, и я думаю, что оно выглядит проще, чем мое решение.
Ответ №1:
Вот простой пример, сначала он находит минимальные и максимальные высоты строк, а затем перебирает все поля, и если высота верхней границы находится между верхней и нижней высотой строки, он присваивает это поле этой строке, и вы получите объект с идентификаторами ваших полей и строками, в которых они находятся: (номера строк начинаются с 0, я использовал положение массива, чтобы получить его, но вы можете назначить любое число, которое хотите при создании массива строк ) вот пример вывода:
[ { "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 lt; boxes.length; i ) { const boxRect = boxes[i].getBoundingClientRect(); if ((!o.top || o.top gt; boxRect.top) amp;amp; boxRect.top gt; fromHeight) { o.top = boxRect.top; o.bottom = boxRect.bottom; } } return o; } let rows = []; let fromHeight = 0; for (var i = 0; i lt; 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 lt; boxes.length; i ) { const boxRect = boxes[i].getBoundingClientRect(); var row = rows.findIndex(p =gt; p.top lt;= boxRect.top amp;amp; p.bottom gt;= boxRect.top); array.push({box:boxes[i].id, row: row}); } console.log(array); lt;htmlgt; lt;headgt; lt;stylegt; .container { width: 1170px; margin: 0 auto; position: relative; } .box { position: absolute; background: red; width: 300px; height: 300px; color: #fff; font-size: 50px; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;div class="container"gt; lt;div class="box" style="top: 20px; left: 30px" id="box1"gt;box1lt;/divgt; lt;div class="box" style="height:100px; top: 90px; left: 530px" id="box2"gt;box2lt;/divgt; lt;div class="box" style="top: 1450px; left: 230px" id="box3"gt;box3lt;/divgt; lt;div class="box" style="top: 550px; left: 630px" id="box4"gt;box4lt;/divgt; lt;div class="box" style="top: 950px; left: 130px" id="box5"gt;box5lt;/divgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. Большое спасибо. Это было лучшее решение, и его было легко понять.