search

cedricdelpoux / react-responsive-masonry

React responsive masonry component built with css flexbox
https://cedricdelpoux.github.io/react-responsive-masonry/
MIT License
353 stars 35 forks source link

Items are not being distributed into columns appropriately #117

Open brandonmcconnell opened 3 months ago

brandonmcconnell commented 3 months ago

I see lots of available space in one column, but extra items are still added to another column

Here is my impl:

<ResponsiveMasonry
  columnsCountBreakPoints={{ 350: 1, 750: 2, 1100: 3 }}
>
  <Masonry>
    ...
  </Masonry>
</ResponsiveMasonry>
dpaulos6 commented 3 months ago

tested it and it's works fine for me

Denis-Andreev commented 3 months ago

Check the source of lib, there are simple logic for elem distribution and working not as you expect

walshie4 commented 2 months ago

I see this happening as well especially as the dataset grows through an infinite scroll type fetch pattern. A couple columns end up growing much longer (FWIW our content is different sized which may contribute to the issue)

cmastro commented 1 month ago

I have the same issue when the dataset grows in a infinite scroll. If you call to an API and the array of elements grows with differents heights, the items are not being distributed appropriately.

cedricdelpoux commented 1 month ago

PR's are welcome if you want to help improving the distribution algorithm