Форум

imedia · #1 (**permalink**) 16.06.2014, 12:35

Можно ли как то яваскриптом перевести те параграфы которые не помещаются в первом блоке в последующий блок?
Помогите пожалуйста очень надо

<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>
<style>
.block{
width:100px;
height:200px;
display:inline-block;
}
#one{
background:#eee;
overflow:hidden;
}
#two{
background:#ee9;
}
</style>

</head>
<body>
<div id="one" class="block">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
<div id="two" class="block">
</div>
</body>
<html>

krasovsky · #2 (**permalink**) 16.06.2014, 13:45

Вообщето такое сразу надо делать на css. Попытка сделать это на js - тоже самое что и впихнуть невпихуемое.
Если твоему параграфу жестко задана высота, и известна высота блока, то элементарным подсчетом и и хардкодным циклом можно переносить параграфы для которых места нет в следующий блок.

Если,как вероятно в твоем случае, еще и высота параграфов неизвестна, то это полное дерьмо а не код - в цикле надо перебирать каждый параграф,суммируя их высоту, и если сумма+след параграф > высота блока,переносить.

рони · #3 (**permalink**) 16.06.2014, 14:38

imedia,

<html>
<head>
<script src="http://code.jquery.com/jquery-2.0.0b2.js"></script>
<script>
   $(function () {
    for (var a = document.querySelector("#one"), b = document.querySelector("#two"), c = a.querySelectorAll("p"), e = c.length, d;
        (d = c[--e]) && !(a.scrollHeight <= a.clientHeight);) b.insertBefore(d, b.querySelector("p"))
});
</script>
<style>
.block{
width:100px;
height:200px;
display:inline-block;
}
#one{
background:#eee;
overflow:hidden;
}
#two{
background:#ee9;
}
</style>

</head>
<body>
<div id="one" class="block">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
</div>
<div id="two" class="block">
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript