Как сверстать полотно из полосок разной длины с переносом?

Question

[kefiijrw]

Есть полоски разнообразной длины, но с фиксированной толщиной. Ими надо заполнить окно браузера без зазоров:


Как это сверстать, чтобы полоски правильно разбивались и переносились на новую строку, без щелей и встык? У меня в голове пока только безумные идеи вроде создания шрифта с шириной символа 1px и набивание им невидимых слов нужной длины с включенным word-wrap.

Всего полосок будет аж 30 тысяч на странице, так что вопрос производительности важен.

Answer 1

[Alexander Mischuk]

Я мимо проходил и решил поинтересоваться, что это за проект такой где на странице 30к элементов в контенте?

Comments

[xmoonlight]

@Mischuk да еще и "идеи вроде создания шрифта с шириной символа 1px"... т.е. контент - это не текст, а полоски! "Вот это странно..." (c)

[kefiijrw]

Биг Дата и всё такое, хочу красиво отобразить благотворительные взносы в стиле "из маленьких донейтов собирается большое дело!"

Answer 2

[Александр Таратин]

masonry.desandro.com

Comments

[Иван]

30 тысяч на странице

Вроде с масонри худо будет, но нужно тестить.
И он точно умеет горизонтально размещать?

[Александр Таратин]

@0neS да не увидел этого требования.

Answer 3

[xmoonlight]

js canvas