Как сделать сортировку div-ов в JavaScript?

231

29 октября 2018, 13:40

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

До

После

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

{
  "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>

Answer 1

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>