Adding additional items to the layout ruins the order

[toufali]

When using, for example, a "show more" button at the bottom of the masonry layout, and then AJAX loading additional items in, the original items all get shuffled out of place.

Perhaps this is a limitation of using the multicolumn layout? A possible work-around might be to reorder all images together, then remove and re-add all items? That seems very inefficient and could cause paint/resource issues though. Any thoughts?

[yyynnn]

yes, order will break if more items added to array. You could add this functionality, it's very convenient for lazyload (load more).

[jessekorzan]

@HandsomeMedia @yyynnn good point... it's a short coming of what I presented here... one thought is to re-order the "whole array" (all items from a DB for example, before loading any content) and only show in sets of 20 items at a time, for example, using a "show more". I dunno... just talking out loud at the moment...

[yyynnn]

So i decided to drop support for masonry grid at work, cuz it is simply an anti-pattern. The only proper way to do it is to use ccs grid.

[ghost]

@HandsomeMedia @yyynnn This is not how you approach a solution based on this nice implementation. For your use-cases, you need to think different regards pagination.

For pagination you need to structure your data in different way. I assume that you both have an array of items that get concat-ed with the new chunk of data once you reach the bottom (or click "More") in the page.

But the correct way to structure your data is to have an array of arrays.

[
 [...] // first pagination data chunk,
 [...] // second pagination data chunk
]

When you want to add the data you need to add a whole array that contains the new chunk.. And then you can render the inner array as columns-container that reorder it's own data. That way you won't need to re-order the whole data that have been re-ordered.

So for pagination on page 2 you'll have two columns-container (each one has it's own data). You can use _.flatten() if you want to iterate over all the data or just writing your simple for loop.

[ghost]

My friend found a leak in this implementation that I suggested which may not show as expected.