36. Виртуальная лента VK с постами разной высоты

В ленте VK посты разной высоты: текст на две строки — 80 px, пост с фото — 300, с опросом — 200. За вечер пользователь пролистывает 2–3 тысячи постов, и рендерить их все нельзя. Высоту каждого поста лента знает после замера.

Напишите createVirtualList(heights) — объект с двумя методами. range(scrollTop, viewportHeight, overscan) возвращает { start, end, offset, total }: строки start ≤ i < end рендерим, offset — верх строки start, total — высота всего списка.

Строка i занимает отрезок [top_i, top_i + h_i). Видимая — та, что пересекается с окном [scrollTop, scrollTop + viewportHeight): строка, которая начинается ровно на нижней границе окна, не видна. К видимым добавьте overscan строк сверху и снизу. scrollTop ограничьте отрезком [0, max(0, total − viewportHeight)].

setHeight(i, h) меняет высоту строки после замера — следующий range учитывает её. Высоты положительные, пустой список даёт нули.

В работе: Ленты и чаты с элементами разной высоты, таблицы с раскрывающимися строками.

Пример 1: верх ленты

[120, 80, 300, 60, 60, 200, 100], [["range", 0, 250, 0]]

[{"start": 0, "end": 3, "offset": 0, "total": 920}]

Пример 2: окно внутри одного поста

[120, 80, 300, 60, 60, 200, 100], [["range", 210, 150, 0]]

[{"start": 2, "end": 3, "offset": 200, "total": 920}]

function createVirtualList(heights) // → { range(scrollTop, viewportHeight, overscan), setHeight(i, h) }

Источник: на задачах VK: лента новостей. Условие пересказано своими словами.