Как расположить блоки div в несколько колонок через цикл?

#javascript

Как расположить блоки div в несколько колонок через цикл?

Мне нужно такой колонок 



Мой колонок в данный момент





var column_count = 4,
    columns = document.querySelectorAll('.column'),
    blocks = document.createElement('div');
blocks.innerHTML = '
Block 3
Block 4
Block 5
Block 6
Block
7
Block 8
';
for (var i = 0; i < blocks.children.length; i++) {
    columns[i].appendChild(blocks.children[i]);
}
body {
    padding: 0;
    margin: 0;
}

.columns {
    width: 100%;
    float: left;
}

.column {
    width: calc(25% - 10px);
    height: calc(100vh - 20px);
    padding: 5px;
    float: left;
}

.column:nth-child(1) {
    background: #ff6c6c;
}

.column:nth-child(2) {
    background: #c06cff;
}

.column:nth-child(3) {
    background: #6c77ff;
}

.column:nth-child(4) {
    background: #ff956c;
}

.column .block {
    width: calc(100% - 10px);
    margin: 5px;
    padding: 20% 0;
    float: left;
    background: #fff;
    text-align: center;
    color: #666;
}

    

        
Block 1
    
    

        
Block 2
    
    

    
    

    




    

Ответы

Ответ 1

Во первых нужно высчитывать столбец в который мы будем вставлять, во вторых аппендить
копию ноды чтобы не нарушить структуру blocks.children и правильно проитерировать элементы.



var column_count = 4,
  columns = document.querySelectorAll('.column'),
  blocks = document.createElement('div'),
  curr_blocks = document.querySelectorAll('.block').length;
blocks.innerHTML = '
Block 3
Block 4
Block 5
Block 6
Block
7
<
Block 8
';
for (var i = 0; i < blocks.children.length; i++) {
  columns[(i + curr_blocks) % column_count].appendChild(blocks.children[i].cloneNode(true));
}
body {
  padding: 0;
  margin: 0;
}

.columns {
  width: 100%;
  float: left;
}

.column {
  width: calc(25% - 10px);
  height: calc(100vh - 20px);
  padding: 5px;
  float: left;
}

.column:nth-child(1) {
  background: #ff6c6c;
}

.column:nth-child(2) {
  background: #c06cff;
}

.column:nth-child(3) {
  background: #6c77ff;
}

.column:nth-child(4) {
  background: #ff956c;
}

.column .block {
  width: calc(100% - 10px);
  margin: 5px;
  padding: 20% 0;
  float: left;
  background: #fff;
  text-align: center;
  color: #666;
}

  

    
Block 1
  
  

    
Block 2
  
  

     
Block 2.5
  
  

  



Ответ 2

Конечно, проще всего и оптимальнее делать такие вещи исключительно с помощью css.
Ну если уж делать с помощью js то хотя бы вынести код в функцию, чтобы можно было использовать
повторно. Можете протестировать на любое количество колонок и элементов createBlocks('cols',
10, 17); например. 



window.onload = init;

function init() {
  createBlocks('cols', 4, 8);
}

function createBlocks(wrap_id, cols, items) {
  var wrap = document.getElementById(wrap_id);
  wrap.innerHTML = '';
  var colWidth = 100 / cols + '%';
  for (var i = 0; i < cols; i++) {
    wrap.innerHTML = wrap.innerHTML + '
';
  }
  var colsArray = document.getElementsByClassName('column');
  for (var i = 0; i < items; i++) {
    var thisCol = ((i + cols) % cols);
    colsArray[thisCol].innerHTML = colsArray[thisCol].innerHTML + '
Block
' + (i + 1) + '
';
  }
}
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.columns {
  width: 100%;
  float: left;
}

.column {
  height: calc(100vh - 20px);
  padding: 5px;
  float: left;
}

.column:nth-child(4n+1) {
  background: #ff6c6c;
}

.column:nth-child(4n+2) {
  background: #c06cff;
}

.column:nth-child(4n+3) {
  background: #6c77ff;
}

.column:nth-child(4n+4) {
  background: #ff956c;
}

.column .block {
  width: calc(100% - 10px);
  margin: 5px;
  padding: 20% 0;
  float: left;
  background: #fff;
  text-align: center;
  color: #666;
}





Например 12 колонок 40 элементов:



window.onload = init;

function init() {
  createBlocks('cols', 12, 40);
}

function createBlocks(wrap_id, cols, items) {
  var wrap = document.getElementById(wrap_id);
  wrap.innerHTML = '';
  var colWidth = 100 / cols + '%';
  for (var i = 0; i < cols; i++) {
    wrap.innerHTML = wrap.innerHTML + '
';
  }
  var colsArray = document.getElementsByClassName('column');
  for (var i = 0; i < items; i++) {
    var thisCol = ((i + cols) % cols);
    colsArray[thisCol].innerHTML = colsArray[thisCol].innerHTML + '
Block
' + (i + 1) + '
';
  }
}
* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.columns {
  width: 100%;
  float: left;
}

.column {
  height: calc(100vh - 20px);
  padding: 5px;
  float: left;
}

.column:nth-child(4n+1) {
  background: #ff6c6c;
}

.column:nth-child(4n+2) {
  background: #c06cff;
}

.column:nth-child(4n+3) {
  background: #6c77ff;
}

.column:nth-child(4n+4) {
  background: #ff956c;
}

.column .block {
  width: calc(100% - 10px);
  margin: 5px;
  padding: 20% 0;
  float: left;
  background: #fff;
  text-align: center;
  color: #666;
}



Ответ 3

var columns = document.getElementsByClassName('column');
var blocks = 8;
for (var i = 2; i < blocks; i++) {
  var div = document.createElement('div');
  div.innerHTML = 'Block ' + (i+1);
  div.className = 'block';
  columns[i % 4].appendChild(div);
}
body {
  padding: 0;
  margin: 0;
}

.columns {
  width: 100%;
  float: left;
}

.column {
  width: calc(25% - 10px);
  height: calc(100vh - 20px);
  padding: 5px;
  float: left;
}

.column:nth-child(1) {
  background: #ff6c6c;
}

.column:nth-child(2) {
  background: #c06cff;
}

.column:nth-child(3) {
  background: #6c77ff;
}

.column:nth-child(4) {
  background: #ff956c;
}

.column .block {
  width: calc(100% - 10px);
  margin: 5px;
  padding: 20% 0;
  float: left;
  background: #fff;
  text-align: center;
  color: #666;
}

  

    
Block 1
  
  

    
Block 2