Как расположить блоки 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
Ответ
Во первых нужно высчитывать столбец в который мы будем вставлять, во вторых аппендить копию ноды чтобы не нарушить структуру 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
Комментариев нет:
Отправить комментарий