Страницы

Поиск по вопросам

среда, 16 января 2019 г.

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

Как расположить блоки 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

Комментариев нет:

Отправить комментарий