How to use Masonry with Infinite Scroll?

Question

JavaScript

Hello, I've been struggling with this problem for several days.
So. There is a Laravel project, the layout on Bootstrap 4 uses card-column, the news grid is built in the Masonry style (in 3 columns). When scrolling down, 9 more news are loaded using Infinite Scroll.
How to display news from left to right and down.
Now the feed displays news like this:
1 4 7
2 5 8
3 6 9
... ... ...
... ... ...
And you need the feed to look like this:
1 2 3
4 5 6
7 8 9
... ... ...
... ... ...

Answer 1

Here masonry.js , in the "Adding & removing items" section, there are examples of using methods for removing and removing items. Just fire your add method on the Infinite Scroll load event. There is simply no other option to line up elements with different heights, and the grid layout cannot do this either.

Answer 2

in my opinion, by default, the order goes from left to right (that is, as you need).
Blocks 1, 2 and 3 will be pushed to the top of the page (starting position).
The 4th block will be under the smallest block in height, the 5th block will be under the next one in height, and so on.
if the height of the 1st block is 200px, the 2nd - 100px, the 3rd - 150px... then the 4th block will be under the 2nd block, the 5th under the 3rd, and so on.