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

Question

[toxic2701]

Реализуйте функцию 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 каждой колонки и отталкиваться от этого...

Comments

[Александр]

Свойство CSS columns не подходит?

[Ankhena]

И чем это отличается от вашего предыдущего вопроса https://qna.habr.com/q/1163656 ?

[toxic2701]

Ankhena, Неправильно заданной формулировкой, но возможности удалить вопрос, к сожалению, я не нашла

[toxic2701]

Александр, только частично для задания колонок и отступов. Настроек вариантов заполнения текста, как в условии, таких не нашла у columns, нужно реализовать с помощью js, скорее всего

[Ankhena]

toxic2701, понятно, но там есть кнопка редактировать вопрос.

Удалить да, нельзя, если уже есть ответ.

[Ankhena]

toxic2701, columns решит вашу задачу вообще без JS.

Но я так понимаю, что у вас это просто учебная задача на JS.

Плагин masonry (можете посмотреть как он работает) использует абсолютное позиционирование блоков.
Также вы можете поискать статьи, где объясняют как можно написать подобную раскладку (на основе флексов или гридов или просто так).

Способ в лоб: создаете внутри node нужно количество div (count).
Берете по порядку элементы.
Складываете по одному в каждую колонку.
Узнаете высоту каждой. Выясняете минимальную.
В неё отправляете следующий элемент.
И т.д. в цикле.

[toxic2701]

Ankhena, Спасибо! а какое свойство в columns отвечает за раскладку по количеству контента? Если без js делать. Количество колонок и отступы я делаю с помощью column-count и column-gap, соответственно. А вот раскладки слева направо по количеству я в документации не нашла

[Алексей Дубровин]

Если не понимаешь, рановато в яндекс

[Ankhena]

toxic2701,

а какое свойство в columns отвечает за раскладку по количеству контента?

Все целиком свойство columns распределяет элементы по колонкам, чтобы получить примерно ровный блок.

Но в отличие от вашей задачи все элементы будут идти по порядку по столбцам. Обычной газетной раскладкой. Т.е. так, чтобы связность текста не нарушилась.

[toxic2701]

Алексей Дубровин, я же не работать к ним идти собираюсь, это всего лишь обучение, или учиться достойны только те, кто уже все знает?) И если такая странная задача в жизни не встречалась, потому что никто так верстку не делает, это не означает, что если человека не направить в правильное русло, он не сможет ее сам решить :) вам бы только принизить только потому, что знаете, откуда задача

[Алексей Дубровин]

toxic2701, эффективнее решать задачи по уровню и на практике, а не точечные. Все это только трата времени, которая не даст реального улучшения. Тк как в реальной жизни задача бы решалась по другому.

Answer 1

[strelok011]

Не нужно ничего вычислять. Ее нужно просто запросить. Это свойство clientHeight

Создаете массив колонок, пробегаете по нему, собираете высоту, ищете первую минимальную, втыкаете туда блок статьи, повторяете пока не кончатся блоки для вставки.

Comments

[toxic2701]

Спасибо! а как создать массив колонок? я планировала через js просто присвоить стили с помощью columns или flex, но элемент с абзацами все равно будет одним элементом. Как сделать разметку так, чтобы разбить на колонки, которые можно было бы в js считывать?

[strelok011]

На чем реализация идет? нативный js? jquery? react?

[yana_eternal]

toxic2701, напиши пожалуйста на почту [e-mail], есть вопросы)

Answer 2

[Александр Алексеев]

.root { column-count: 2 }
правда есть нюансы) гуглите свойство break-inside