search

roeierez / infinite-list

Infinite list in javascript that scrolls in 60fps
623 stars 45 forks source link

How to properly set the height, or the spacing between messages? #10

Closed vgoklani closed 8 years ago

vgoklani commented 8 years ago

I'm using your code for a highly curated twitter feed, and I've found that the "heights" [or more precisely the separation between the text boxes] is a function of both the number of characters in the message (I've limited them to 140), which directly affects the number of lines being used, the way the text gets wrapped, which depends on the spacing, and the output device (i.e. the resolution of the screen, iPhone 5, vs 6, vs 6+). I'm curious, there are a lot of different cases here, is there a simple way of solving this problem? My approach involves lots of "if" statements, and it's just a hack. It's tricky since the width of the box is constantly changing...

The auto-detect heights will be an interesting feature. Is this the problem you're trying to solve, albeit, algorithmically?

roeierez commented 8 years ago

My work on auto-detect height is exactly to solve this problem you are facing. Actually in order to do that manually like you are trying it takes a lot of effort and there will always be a case that you miss. My attitude is to let the browser render the item separately and then query a DOM read operation to get the height. This way I use the browser rendering on the current device, resolution etc... The work is almost done and you can see it on the branch 'variable_heights'. you can build the examples and see that it uses variable heights. I am currently on vacation and return on October, then I intend to merge this work to the master branch.

roeierez commented 8 years ago

Look for the flickr example to see the feature in action.

roeierez commented 8 years ago

The auto-detect heights is now supported and merged to master. you don't need to implement the 'itemHeightGetter' anymore as it is optional. The list will figure out the height automatically. I will be curious to know if you are satisfied with the results.