Здравствуйте,
ozoro!
Вы задали очень правильный и грамотный вопрос, на который я вам отвечу.
Вот ваш основной алгоритм. Вы измеряете высоты 1-ого и 2-ого блоков, вычисляете разницу, и если она оказывается больше, чем 200 пикселей, то элементы выстраиваются стопкой, а иначе столбиками.
Потом, при изменении размеров окна, у вас опять повторяется тот же самый алгоритм, но, обратите внимание, что блоки могут быть выстроены стопкой, и соответственно вы вычисляете не те высоты! Вы ведь хотите сравнивать высоты блоков, которые выстроены столбиками.
Следовательно, вам нужно в свой алгоритм добавить шаг, что перед каждым измерением высот, блоки должны быть приведены в своё первоначальное состояние, т. е. они должны быть выстроены в столбик.
Код, я привожу ниже.
«Текст Текст Текст» можно генерировать при помощи скрипта.
При каждом изменении размеров окна, в консоль выводятся высоты блоков и разница их высот, это можно удалить.
Можно сразу посмотреть результат в отдельной вкладке...
https://charm-launch.glitch.me/columns.html
<!DOCTYPE html>
<html lang="ru">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
}
#item-1 { background-color: gold; }
#item-2 { background-color: crimson; }
.item {
display: inline-block;
width: 49.5%;
vertical-align: top;
}
.item h3 { text-align: center; }
.item.cs3 {
display: block;
width: 100%;
}
.cs1, .cs2 {
padding: 20px;
text-align: left;
font-size: 30px;
}
.cs1 li, .cs2 li { margin-top: 25px; }
.cs1 li:first-child { margin-top: 0; }
.item h3 { margin: 0; }
.column-list {
padding: 0 10px;
list-style-position: inside;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
.column-list.cs4 {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.column-list li ul,
.column-list li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
</style>
</head>
<body>
<div class="item">
<div class="cs1">
<div id="item-1">
<h3>Заголовок первого блока</h3>
<ul class="column-list">
<li>Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1 Пункт #1</li>
<li>Пункт #2</li>
<li>Пункт #3</li>
<li>Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4 Пункт #4</li>
<li>Пункт #5</li>
<li>Пункт #6</li>
<li>Пункт #7
<ul>
<li>Пункт #7.1</li>
<li>Пункт #7.2</li>
<li>Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3 Пункт #7.3</li>
<li>Пункт #7.4</li>
<li>Пункт #7.5</li>
</ul>
</li>
<li>Пункт #8
<ul>
<li>Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1 Пункт #8.1</li>
<li>Пункт #8.2</li>
<li>Пункт #8.3</li>
</ul>
</li>
<li>Пункт #9</li>
<li>Пункт #10</li>
<li>Пункт #11 Пункт #11 Пункт #11 Пункт #11 Пункт #11
<ul>
<li>Пункт #11.1</li>
<li>Пункт #11.2</li>
<li>Пункт #11.3</li>
<li>Пункт #11.4</li>
<li>Пункт #11.5</li>
<li>Пункт #11.6</li>
</ul>
</li>
<li>Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12 Пункт #12</li>
<li>Пункт #13</li>
<li>Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
<li>Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14 Пункт #14</li>
<li>Пункт #15</li>
<li>Пункт #16</li>
</ul>
</div>
</div>
</div>
<div class="item">
<div class="cs2">
<div id="item-2">
<h3>Заголовок второго блока</h3>
<script>
document.write(new Array(10).join("<p>" + new Array(41).join("Текст ") + "</p>"))
</script>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
const item1 = document.getElementById("item-1");
const item2 = document.getElementById("item-2");
const MAX_HEIGHT_DIFF = 200;
function resizeHandler() {
$(".item").removeClass("cs3");
$(".column-list").removeClass("cs4");
const Δh = Math.abs(item1.offsetHeight - item2.offsetHeight);
console.log(`
h₁ = %s
h₂ = %s
Δh = %s
`, item1.offsetHeight, item2.offsetHeight, Δh);
if (Δh > MAX_HEIGHT_DIFF) {
$(".item").addClass("cs3");
$(".column-list").addClass("cs4");
}
}
resizeHandler();
addEventListener("resize", resizeHandler);
</script>
</body>
</html>
ksa,
рони,
laimas, какая речь может идти о трубах в кроватях и сантехниках, когда это тема про вычисление разности высот? Просто вы, должно быть Δh не осилили, бывает!
laimas, лучше расскажите (или снимите жаркое кино) про идентификаторы?
|
Сообщение от ozoro
|
|
Неужели проблема нерешаемая?
|
Решаемая, смотри выше!