react-masonry-css
react-masonry-css copied to clipboard
paulcollett
Request to make columns as equal height as possible
It will work perfectly but if some items of particular columns make the column abruptly longer move the last elements of column to other columns.
Can you clarify what "column abruptly longer" mean? Maybe with code and a screenshot of the unexpected behaviour is possible
Thanks for the screen shot, I understand what you're asking now.
I'm aware of this behaviour and it's occurring because we don't actually handle this case, but i'm open to revisiting.
To implement it's slight performance trade off, as we need to calculate all the item heights and adjust the layout again, then again after each image has loaded. So for this plugin, avoiding all these re-layouts was actually the motivation behind making this plugin originally.. to be a fast and performant foremost.
If we were to do this I'd consider implementing it to be an "opt-in" feature to retain performance but support this feature to the smaller set of users who would need it. happy to discuss more
@paulcollett having the same issue as here and in #73. The problem becomes especially bad if you use this package for something like unsplash.com. The more items you display, the larger the difference between the columns can become until you end up with just a single column that is actually filled till the end.
this is a great alternative to the traditional masonry library 🙌 However, with such uneven columns, it's visually unusable for anything more than a few items as the page looks broken. Is this opt-in feature in the works by any chance?
Considering this is, understandably, intended behaviour we'll likely have to switch to infinite loading of our content but as @jaschaio pointed out, that only delays or potentially magnifies the issue.
Keeping an eye on this for future projects 🙏
Does anybody have an alternative library they can recommend to get around this issue? It's bad enough with a few elements like in the screenshot above, but if you have over 100 (not uncommon for an image gallery) it leaves columns comically uneven, several screens of height different.
Does anybody have an alternative library they can recommend to get around this issue? It's bad enough with a few elements like in the screenshot above, but if you have over 100 (not uncommon for an image gallery) it leaves columns comically uneven, several screens of height different.
Absolutely True! I'm removing this library immediately. This is what I need https://www.npmjs.com/package/react-photo-gallery?activeTab=readme
