Задача сравнивать
ВЫСОТУ блоков у которых
display:inline-block; width:50%
ПРИ РАЗНОЙ ШИРИНЕ ОКНА БРАУЗЕРА, и если один блок становится больше на величину, например 100px, то делать
display:block; width:100% добавляя класс. При этом списки ul li в первом блоке (верхнем) должны распределяться в 2-е колонки. Если блоки при определенной ширине окна браузера становяться высотой с допустимым значением, то удалять класс с правилами
display:block; width:100% и в первом блоке списки делать в одну колонку, то есть возвращать блоки в display:inline-block; width:50%.
Использую
такую библиотеку JS. Репозиторий
github.
При определенных условиях все работает правильно.
НО!!!
При некоторых размерах ширины окна классы начитают добавляться и удаляться до бесконечности. То есть блоки по очереди становятся то
display:inline-block; width:50%, то
display:block; width:100%.
Заметил, что когда блоки находятся с классом с правилами display:inline-block; width:50% и разница в высоте не превышает допустимое значение, то высота каждого блока определяется правильно один раз, как при ресайзе, так и при перезагрузке страницы, изменяется тоже один раз при изменении высоты блока.
НО когда блоки становятся display:block; width:100%, то высота блока определяется дважды.
То есть:
1. определяется высота которая была бы при данной ширине окна, если бы блоки ниходились display:inline-block; width:50%
2. определяется высота которая была бы при данной ширине окна, если бы блоки ниходились display:block; width:100%
В консоле, при выводе туда ширины ОДНОГО из блоков, это выглядит следующим образом:
Высота Первого блока: 2371
Высота Первого блока: 1216
Я так понимаю здесь и зарыта собака, поэтому думаю, надо определять при любых условиях ВЫСОТУ только блока, который был бы display:inline-block; width:50%, то есть значение которое выводится первым (в примере из консоли которое первое сверху).
Помогите поправить код, чтобы выдавалось только первое значение при любой ширине окна браузера.
Заранее, благодарю!
<!DOCTYPE html>
<html lang="ru">
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<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: yellow;
}
#item-2 {
background-color: red;
}
.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;
/*outline: 1px solid #000;*/
list-style-position: inside;
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
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" class="item-for-resize-tracking">
<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" class="item-for-resize-tracking">
<h3>Заголовок второго блока</h3>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
<p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://test8880.000webhostapp.com/src/js/ResizeSensor.js"></script>
<script>
const items = document.querySelectorAll('.item-for-resize-tracking');
const itemSizes = {};
const sizeChanges = {};
// Setup ResizeSensor on target item
items.forEach(item => {
sizeChanges[item.id] = false;
new ResizeSensor(item, function(e) {
itemSizes[item.id] = e;
sizeChanges[item.id] = true;
if (!Object.values(sizeChanges).some(a => !a)) {
compareSizes();
Object.keys(sizeChanges).forEach(f => sizeChanges[f] = false);
}
});
});
function compareSizes() {
const size1 = itemSizes['item-1'];
const size2 = itemSizes['item-2'];
if (size1 && size2) {
var
d = 200,
dif = Math.abs(size1.height-size2.height),
cz = 1;
//console.log('Ширина окна: ' + window.innerWidth);
//console.log(size1);
//console.log('Разница высоты: ' + dif);
console.log('Высота Первого блока: ' + size1.height);
//console.log('Высота Второго блока: ' + size2.height);
if (dif > d){
sz = 2;
$(".item").addClass("cs3");
$(".column-list").addClass("cs4");
//console.log("Классы ДОБАВЛЕНЫ, sz = " + sz + " Разница: " + dif);
} else {
sz = 1;
$(".item").removeClass("cs3");
$(".column-list").removeClass("cs4");
//console.log("Классы УДАЛЕНЫ, sz = " + sz + " Разница: " + dif);
}
}
}
</script>
</body>
</html>
