Skip to content

sergiolysenko/yandex-frontend-school

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

Задача написать JavaScript-функцию, которая разместит блоки с текстом как газетные колонки.

Формат ввода

Реализуйте функцию renderWaterfall. На вход она должна принимать следующие параметры:

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

Пример rootNode:

<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-страницы функция renderWaterfall должна расположить DOM-элементы объявлений так, чтобы они разместились в columnsCount колонок, а расстояние между ними составляло elementGap. Каждый следующий элемент нужно помещать в ту колонку, высота которой меньше остальных. При равных наименьших высотах элемент помещается в первую колонку слева.

Например:

function renderWaterfall(rootNode, columnCount, elementGap) {
   // ...
}

Примечания

Не удаляйте существующие классы элементов. Вы можете изменять ширину объявлений, но высота должна быть зависимой от контента. Можно добавлять свои дополнительные элементы для структурирования. Для расположения корневого элемента рекомендуется использовать display:flex.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published