@toxic2701

Как написать Js функцию, размещающая блоки с абзацами как газетные колонки?

Реализуйте функцию renderContent. Принимает параметры:

node: элемент в котором находятся объявления (HTMLDivElement)
count: количество колонок (number)
gap: расстояние между колонками, а также элементами по-вертикали (number)

Пример node:
<div class="root">
  <div class="el">У каждого объявления есть свои стили</div>
  <div class="el">Их не нужно менять</div>
  <div class="el">Каждое объявление должно быть свободным по высоте</div>
  <div class="el">А вот ширину нужно будет выставить</div>
  <div class="el">Ширину элемента root, при необходимости вы можете определить, но в тестах она может быть разная</div>
</div>


Вывод:
При вызове в контексте html-страницы функция renderContent должна расположить DOM-элементы объявлений так, чтобы они разместились в count колонок, а расстояние между ними составляло gap. Каждый следующий элемент нужно помещать в ту колонку, высота которой меньше остальных А если высота одинаковая у всех колонок, то в самую левую

Не понимаю, как сделать верстку такой, чтобы можно было вычислить высоту с помощью js каждой колонки и отталкиваться от этого...
  • Вопрос задан
  • 886 просмотров
Пригласить эксперта
Ответы на вопрос 2
@strelok011
Не нужно ничего вычислять. Ее нужно просто запросить. Это свойство clientHeight

Создаете массив колонок, пробегаете по нему, собираете высоту, ищете первую минимальную, втыкаете туда блок статьи, повторяете пока не кончатся блоки для вставки.
Ответ написан
.root { column-count: 2 }
правда есть нюансы) гуглите свойство break-inside
Ответ написан
Ваш ответ на вопрос

Вопрос закрыт для ответов и комментариев

Потому что уже есть похожий вопрос.
Похожие вопросы