0

Задача сравнивать ВЫСОТУ блоков у которых display:inline-block; width:50% ПРИ РАЗНОЙ ШИРИНЕ ОКНА БРАУЗЕРА, и если один блок становится больше на величину, например 100px, то делать display:block; width:100% добавляя класс. При этом списки ul li в первом блоке (верхнем) должны распределяться в 2-е колонки. Если блоки при определенной ширине окна браузера становяться высотой с допустимым значением, то удалять класс с правилами display:block; width:100% и в первом блоке списки делать в одну колонку, то есть возвращать блоки в display:inline-block; width:50%.

Использую такую библиотеку JS, в том числе поддерживающую Jquery. Вот репозиторий на github.

Здесь мне помог @Stepan Kasyanenko, на основе его кода в ответах сделал под себя, при определенных условиях все вроде работает правильно. НО есть одно НО!!!

При некоторых размерах ширины окна браузера классы начитают добавляться и удаляться до бесконечности. Естественно, блоки начинают дергаться.

Заметил, что когда блоки находятся с классом с правилами 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%, то есть значение которое выводится первым (в примере из консоли которое первое сверху).

Помогите поправить код, чтобы выдавалось только первое значение при любой ширине окна браузера.

Заранее, благодарю!

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);	
    }
  }
}
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;
}
<!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">
  <title>Test1</title>
  <meta name="description" content="">
</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="http://a0263906.xsph.ru/src/js/ResizeSensor.js"></script>
</body>

</html>

2
  • Не майтесь дурью, используйте bootstrap grid
    – ordman
    5 ноя 2019 в 2:27
  • @Ordman - приведи пример как реализовать эту задачу с помощью bootstrap grid... или не вникая в суть стоящей задачи, написал комментарий?
    – ozoro
    6 ноя 2019 в 17:15

1 ответ 1

0

Пример с использованием bootstrap и @media queries

.column-list {
  padding: 0 10px;
  /*outline: 1px solid #000;*/
  list-style-position: inside;
  -webkit-column-gap: 20px;
  /* Chrome, Safari, Opera */
  -moz-column-gap: 20px;
  /* Firefox */
  column-gap: 20px;
}

@media (min-width: 376px) {
  .column-list {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
}

@media (min-width: 1140px) {
  .column-list {
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
  }
}

.column-list li ul,
.column-list li {
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
<!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">
  <title>Test1</title>
  <meta name="description" content="">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xl-6 col-sm-12">
        <div id="item-1">
          <h3>Заголовок первого блока</h3>
          <ul class="column-list">
            <li>Пункт #1 Пункт #1Пункт #1Пункт #1Пункт #1Пункт #1Пункт #1Пункт #1Пункт #1Пункт #1</li>
            <li>Пункт #2</li>
            <li>Пункт #3</li>
            <li>Пункт #4</li>
            <li>Пункт #5</li>
            <li>Пункт #6</li>
            <li>Пункт #7
              <ul>
                <li>Пункт #7.1</li>
                <li>Пункт #7.2</li>
                <li>Пункт #7.3</li>
                <li>Пункт #7.4</li>
                <li>Пункт #7.5</li>
              </ul>

            </li>
            <li>Пункт #8
              <ul>
                <li>Пункт #8.1</li>
                <li>Пункт #8.2</li>
                <li>Пункт #8.3</li>
              </ul>

            </li>
            <li>Пункт #9</li>
            <li>Пункт #10</li>
            <li>Пункт #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</li>
            <li>Пункт #13</li>
            <li>Пункт #14</li>
            <li>Пункт #15</li>
            <li>Пункт #16</li>
            <li>Пункт #14</li>
            <li>Пункт #15</li>
            <li>Пункт #16</li>
          </ul>
        </div>
      </div>
      <div class="col-xl-6 col-sm-12">
        <div class="cs2">
          <div id="item-2" class="item-for-resize-tracking">
            <h3>Заголовок второго блока</h3>

            <p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов,
              используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами
              Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

1
  • так я и предполагал, в суть проблемы не вник. Такое можно сделать и без bootstrap. Задача не в том, чтобы менять расположение блоков НЕ по заранее установленным @media queries, а менять расположение тогда, когда один из блоков становится выше другого, например, больше чем на 150px. Это может происходить, например, при 1232px или другой ширине окна браузера, а через несколько пикселей уменьшения или увеличения ширины может быть допустимой разницы в высоте или же первый блок может быть больше другого с превышением допустимой разницы.
    – ozoro
    7 ноя 2019 в 15:09

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.