08.11.2019, 09:52
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Здравствуйте, 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
|
|
Неужели проблема нерешаемая?
|
Решаемая, смотри выше!
|
|
08.11.2019, 10:28
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Malleys
|
|
лучше расскажите (или снимите жаркое кино) про идентификаторы
|
Какая может быть речь о кино, когда тема о разности высот?
Я вообще и не собирался чего-то здесь осиливать, но коли вы киноман, хорошо, как только Брюс Уиллис даст согласие сниматься у меня, так сразу и начну. 
Примечание: Мужик в доме должен быть мужиком, а не оленем, а не отличать трубы от гибкой подводки, ну это позор для него.
Последний раз редактировалось laimas, 08.11.2019 в 10:37.
|
|
08.11.2019, 19:07
|
 |
Аспирант
|
|
Регистрация: 04.05.2019
Сообщений: 80
|
|
Malleys,
Благодарю, то что мне было нужно!
Часть кода не понял, так как нигде не видел таких записей или не обращал внимания, но работает так как мне надо.
Malleys, можешь пояснить вот это:
const Δh = Math.abs(item1.offsetHeight - item2.offsetHeight); // что означает треугольник перед h и как такой треугольник набрать на клавиатуре?
console.log(`
h₁ = %s // что это означает? и как h или другую букву с такой маленькой цыфрой набрать на клавиатуре?
h₂ = %s
Δh = %s
`, item1.offsetHeight, item2.offsetHeight, Δh); // это, я понимаю, выводятся по порядку заначения переменных указанных в апострофах?
Копирую и вставляю в notepad++ и у меня вместо маленьких цифр получаются квадратики, а вернее квадратная рамка.
Копирую этот код с квадратиками и всавляю сюда (код выше в настоящем сообщении, который прошу разъяснить) эти кадратики опять становяться маленькими цифрами? Магия какая-то  
Почему так получается?
Последний раз редактировалось ozoro, 08.11.2019 в 19:18.
|
|
09.11.2019, 07:49
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от ozoro
|
|
Копирую и вставляю в notepad++
|
Вставьте в Word, будет нормально. Не партесь, замените на простое, ведь разницы нет как вы переменные назовете. |
|
09.11.2019, 15:30
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от ozoro
|
|
это, я понимаю, выводятся по порядку значения переменных указанных в апострофах?
|
Да, для форматирования вы можете использовать подстановочные символы с дополнительными параметрами, подробнее смотрите на developer.mozilla.org!
|
Сообщение от ozoro
|
|
Копирую и вставляю в notepad++ и у меня вместо маленьких цифр получаются квадратики, а вернее квадратная рамка.
|
Вы можете сохранить, оно будет работать, просто у вас в редакторе используется шрифт, в котором нет таких символов. Поэтому вы не видите начертание символа, но компьютер знает, какой там символ. Используйте качественный шрифт, в котором прорисованы эти символы, например, Fira Code, Menlo, Pragmata Pro, Ubuntu Mono или DejaVu Sans Mono. Я использую шрифт Fira Code в редакторе кода Visual Studio Code.
Вот так этот фрагмент кода выглядит в редакторе кода Visual Studio Code с поддержкой тысяч расширении для удобной разработки (шрифт Fira Code)
Также вы можете установить себе Sublime Text, есть встроенный пакетный менеджер с расширениями для множества языков программирования (шрифт Menlo, но это всё настраиваемое, включая цветовые темы)
Также вас может заинтересовать редактор Brackets со встроенным сервером и редактированием вживую HTML и CSS. (шрифт Operator Mono, но в нём не все символы есть, на рисунке видно, что ∆ взято из другого шрифта, в настройках можно указать множественные шрифты)
Автодополнение, подсказки, проверка типов, синтаксиса, автоматизация сборки, встроенная консоль, упрощённая работа с git, автоформатирование кода (от тех кто мучался в notepad++), подсветка синтаксиса и многое другое доступно в современных редакторах на всех платформах.
Ссылки на упомянутые программы для тех, кто программирует...
|
Сообщение от ozoro
|
|
Копирую этот код с квадратиками и вставляю сюда (код выше в настоящем сообщении, который прошу разъяснить) эти квадратики опять становятся маленькими цифрами?
|
Это не магия, это значит, что в том редакторе используется шрифт, в котором не прорисован нужный символ, поэтому он отображается как квадратик (missing glyph). Когда вы копируете текст, то в буфер обмена помещается не картинка с экрана, а данные, представляющие этот текст.
|
Сообщение от ozoro
|
|
что означает треугольник перед h
|
Это греческая буква дельта, которая является общепринятым математическим обозначением изменения или различия между значениями переменных. Вы можете ещё больше узнать о применении этого символа на wikipedia.org!
|
Сообщение от ozoro
|
|
треугольник перед h… как такой треугольник набрать на клавиатуре?
|
Если вы используете английскую раскладку, то вы можете нажать ⌥J (т. е. Option+J), получается символ «∆»! Также этот и другие символы можно выбрать из палитры символов Shift+Cmd+Пробел
Возможно вам будет интересно посмотреть видео на эту тему...
https://youtu.be/xGS6b7uPEcg?t=31
https://youtu.be/boZA85IcDZQ?t=20
|
Сообщение от laimas
|
|
Вставьте в Word, будет нормально.
|
Ужас!
|
|
09.11.2019, 15:32
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Malleys
|
|
Ужас!
|
Куда ужаснее выпендриваться, предлагая всякую хрень в качестве имен, потом предлагая к ним обширные инструкции. Кроме вас на форуме этой хренью никто не страдает. |
|
09.11.2019, 15:48
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Т. е. печатать код в Word это для вас нормально? Установил я Brackets, значит страдаю! С вами всё понятно!
|
|
09.11.2019, 15:53
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Malleys
|
|
Т. е. печатать код в Word это для вас нормально?
|
Не нормально не в Word, который, к сожалению, пришлось упоминать, а маяться дурью. Ведь даже ежик понимает, что код предлагаемый будет копироваться и вставляться во что угодно, которое вместо вашей красоты будет отображать шлак. Так что ваши "изыски" в этом плане чистый выпендрежь. |
|
09.11.2019, 17:43
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от laimas
|
|
Ведь даже ежик понимает, что код предлагаемый будет копироваться и вставляться во что угодно, которое вместо вашей красоты будет отображать шлак.
|
Очевидно нужно использовать обновлённую ОС с нормальной поддержкой Unicode. В windows 10 есть такие проблемы? Почему такие проблемы?
Помню у mp3-файлов в проигрывателе на mac и на телефоне всё нормально отображались названия русских песен, а на windows 7 что-то «крякозябры»! Так что это не моя проблема! А ещё там было windows-949 и windows-1251, которые нужно разгадывать на windows 10 (имена файлов стали «крякозябрами»). Красота! |
|
09.11.2019, 17:50
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Malleys
|
|
Так что это не моя проблема!
|
И не моя, а ваша, вам же приходится к своему коду прилагать инструкции. А думать, что все используют ту же платформу и инструменты, что и вы, это самонадеянность, а заставлять это делать, это уже хамство. |
|
|
|
