Virtual list with dynamic elements


#1

I am wondering what would be the best way to create a virtual list with dynamic elements of which I don’t know what their height will be until I put them in the DOM. I know that I can set a function to calculate the height of an element, but what would be an efficient way to do that?


#2

The best way of course is height function where you need to return element height. But if you don’t know it then it is a bit tricky. Then I suggest logic should be the following: after VL elements inserted you get the DOM element height and save it in some cache object/array, and trigger VL to rerender list, and inside of its height function you return that value from cache


#3

This seems to work for the initial items, but as soon as I append more items, the list starts to jump and skips elements. Is this a bug or is the virtual list behaving differently when appending items?

Edit: Seems like its not a problem of the append function, but of long lists. Somewhere around the 15th element the list starts skipping elements, even if I put 20 items in the list at init time.