1

Нужно сортировать не вертикально а горизонтально!

До

введите сюда описание изображения

После

введите сюда описание изображения

Как можно получить такой ответ?

{
  "0": <div class="block">1</div>,
  "1": <div class="block">2</div>,
  "2": <div class="block">3</div>,
  "3": <div class="block">4</div>,
  "4": <div class="block">5</div>,
  "5": <div class="block">6</div>,
  "6": <div class="block">7</div>,
  "7": <div class="block">8</div>,
  "8": <div class="block">9</div>,
  "9": <div class="block">10</div>,
  "10": <div class="block">11</div>,
  "11": <div class="block">12</div>,
  "12": <div class="block">13</div>,
  "13": <div class="block">14</div>,
  "14": <div class="block">15</div>,
  "15": <div class="block">16</div>,
  "16": <div class="block">17</div>
}

var block = document.querySelectorAll('.block'),
  column_count = 4; // У нас 4 колонка
console.log(block);
body {
  width: 100%;
  float: left;
  margin: 0;
  background: #F4F4F4;
  padding: 15px;
  box-sizing: border-box;
}

.columns {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.column {
  width: calc(25% - 15px);
}

.block {
  width: 100%;
  float: left;
  margin: 0 0 20px;
  padding: 10px 0;
  background: #FFFFFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  text-align: center;
  font-size: 40px;
  color: #999;
}
<div class="columns">
  <div class="column">
    <div class="block">1</div>
    <div class="block">5</div>
    <div class="block">9</div>
    <div class="block">13</div>
    <div class="block">17</div>
  </div>
  <div class="column">
    <div class="block">2</div>
    <div class="block">6</div>
    <div class="block">10</div>
    <div class="block">14</div>
  </div>
  <div class="column">
    <div class="block">3</div>
    <div class="block">7</div>
    <div class="block">11</div>
    <div class="block">15</div>
  </div>
  <div class="column">
    <div class="block">4</div>
    <div class="block">8</div>
    <div class="block">12</div>
    <div class="block">16</div>
  </div>
</div>

5
  • console.log(sort.split(', ').sort((a, b) => a - b).join(', '));
    – Yaant
    13 авг 2018 в 17:58
  • Дополните вопрос- почему в 1 группе 5 дивов, во всех остальных по 4, после сортировки что ожидаете получить- то же количество дивов в группах или разное, или в одной группе?
    – user218976
    14 авг 2018 в 7:05
  • @Yaant Обновил вопрос 14 авг 2018 в 8:24
  • @Anamnian Обновил вопрос 14 авг 2018 в 8:24
  • 1
    нужно чтобы элемент с контентом 1 был в первой column, с контентом 2, во второй column и т.д.? Или в первой column и 1 и 2 и 3? Сколько в column может быть подэлементов? У Вас везде кроме первой column по 4 элемента, а в первой 5.. Логику сложно уловить. Зачем вы рисуете расположение поcolumn, а ответ просите объект? Вам нужно визуально отсортировать или собрать объект с информацией?
    – user220409
    14 авг 2018 в 9:10

1 ответ 1

0

var block = document.querySelectorAll('.block'),
  sort = '',
  column_count = 4; // У нас 4 колонка
for (var i = 0; i < block.length; i++) {
  if (block.length - 1 != i) {
    sort += block[i].innerText + ', ';
  } else {
    sort += block[i].innerText;
  }
}

var arr = sort.split(", ");

function compareNumeric(a, b) {
  return a - b;
}

arr.sort(compareNumeric);
console.log(arr);
body {
  width: 100%;
  float: left;
  margin: 0;
  background: #F4F4F4;
  padding: 15px;
  box-sizing: border-box;
}

.columns {
  width: 100%;
  float: left;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.column {
  width: calc(25% - 15px);
}

.block {
  width: 100%;
  float: left;
  margin: 0 0 20px;
  padding: 10px 0;
  background: #FFFFFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  text-align: center;
  font-size: 40px;
  color: #999;
}
<div class="columns">
  <div class="column">
    <div class="block">1</div>
    <div class="block">5</div>
    <div class="block">9</div>
    <div class="block">13</div>
    <div class="block">17</div>
  </div>
  <div class="column">
    <div class="block">2</div>
    <div class="block">6</div>
    <div class="block">10</div>
    <div class="block">14</div>
  </div>
  <div class="column">
    <div class="block">3</div>
    <div class="block">7</div>
    <div class="block">11</div>
    <div class="block">15</div>
  </div>
  <div class="column">
    <div class="block">4</div>
    <div class="block">8</div>
    <div class="block">12</div>
    <div class="block">16</div>
  </div>
</div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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