Balanced columns
bserem opened this issue · comments
I saw that savvior splits columns evenly regarding the number of items in each column.
This means, that every column will have the same amount of items (plus/minus one).
However, when one of the items in the column is very very tall, taller that most other items, this creates an uneven column.
Are there any thoughts on how to overcome this? Is this something that is going to be supported by savvior in the future?
Thanks
The current logic is very simplistic indeed, the total number of items are evenly divided. The sole reason for this behaviour is that the dimensions of grid elements cannot be determined at the time a savvior grid is usually created. Images, iframes, and other non-blocking elements that load after savvior.init() can distort the even "look" of the columns. That said, at the moment, Savvior works best with items in a grid which do not vary a lot in height.
I am thinking about an alternative algorithm to distribute grid items based on their heights however this would impact the overall experience. For such even distributions to work first all elements that savvior need to act on need to be loaded, only after the grid can be created. This potentially causes a flash of layout change which I generally try to avoid.
Basically, I am open to suggestions here.
Can't think of anything. We are experimenting with several ideas in a project at the moment, so I'll pass this around to the rest of my team to see if we come up with something.
I encountered the same issue (otherwise I really love this lib, because it's so fast) and tried to add a comparison of heights for the division of the items.
The code is not meeting your coding standards and I didn't add a unit test yet, but before that I wanted to ask if you would consider something like this. It's working for me and not breaking unit tests ;-)
See the code here: manuel-berger@cc32144#diff-51d045e87789faf8da1798427e452a3b
Thanks for this I think it looks good. Even though it still cannot solve the problem of potential initial layout repaints with images or iframes, I would certainly consider this feature as a configurable option via savvior.init(), preferably disabled by default. I am thinking of having pluggable methods of a 'default' (the current) and 'measured' (this proposal) item distribution.
You are most welcome to prepare a fully working PR complete with test coverage and documentation, let me know if I can be of any help.
I was just encountering this issue myself and would also love the ability for even spread out elements based on their height. Any idea when/if this got added?
Thanks,
Maybe you could use the code I linked above. I have to read into the JS-unit tests, config-option and documentation, etc. to make a decent pull request. Unfortunately I can't do it this week, maybe in about 2 weeks.
Any news?
The sole reason for this behaviour is that the dimensions of grid elements cannot be determined at the time a savvior grid is usually created.
The way I usually do it is to calculate the image ratio server-side and then attach it with a data-ratio attribute to the img element. Then, it’s pretty easy to calculate its final size even before it is loaded. Might that be a strategy for savvior?
I shall keep this open for future reference but I cannot dedicate much time to implement new features on this right now. I guess we'd need to update the tooling around this library in order to make it easier to contribute.
This project has not received any updates for several years now. Feel free to fork this project if you still rely on it. I am closing this issue now, thank you for your continued care!