How to implement a grid and Infinite scroll together?

Question

I’m developing a site style Pinterest but I’m not able to join these two features.

To do the Infinite scroll, I used jQuery with AJAX to pull the database posts and append them into the body. Basically, I copied this formula here: https://www.youtube.com/watch?v=_D-CPBvqQaU

And to make the grid Mansory, I stylized the body with the column-Count: 6. Basically, I copied this idea here: https://www.youtube.com/watch?v=jqx_gANtNhg

The problem is that using the column-cont property, posts are loaded vertically until the entire first column is filled. And from there is filled the second et cetera...

As the height of the page is always increasing with the load of the new posts, the posts move up and left so that the first columns are filled, making a very undesirable effect! Kind of:

Before:

1,3,5
2,4,6

Afterward:

1,4,7
2,5,8
3,6,9

And then again:

1,5,9
2,6,10,
3,7,11,
4,8,12

When, in fact, I wanted an effect like this:

Before:

1,2,3
4,5,6

Afterward

1,2,3
4,5,6
7,8,9

And then again:

1,2,3
4,5,6
7,8,9
10,11,12

The solution to this I found in this script here: https://masonry.desandro.com/ And it’s very easy to implement:

<script src="/path/to/masonry.pkgd.min.js"></script>

<div class="grid">
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  <div class="grid-item">...</div>
  ...
</div>

<script>
  $('.grid').masonry({
    itemSelector: '.grid-item'
  });
</script>

Only it doesn’t work properly with jQuery’s append() method. Every time a new image is appended, the larger image dictates the height of its respective Row causing the images next to smaller size to have a vacant vertical space outside of it. Thus:

NOTE: And this effect of loading posts horizontally also cannot be done through flexbox, unfortunately. Because if the posts have different heights, it will fall into the same problem above.

Well, this same site above offers an alternative solution to the Infinite Scroll that should probably match the masonry method. Here’s the link: https://infinite-scroll.com/

Only I didn’t understand, I couldn’t implement it.

Anyway, I know that long, blurred issues in stackoverflow are penalized, but note that deep down my question is very objective. I want to reconcile these two functionalities in a very simple and practical way, but I don’t know how to do it.

EDIT: At the request of university students, I am including my source-codes:

1 - JQUERY METHOD MAKING APPEND

function load_posts(offset, prime_random_key, prime_group_key) {
    $.ajax({
        type: 'POST',
        url : 'http://localhost/app/controller/ajax/get_posts.php',
        data: {
            'url'       : url,
            'limit'     : quant,
            'offset'    : offset,
            'category_group': category_group,
            'category'  : category,
            'modelstar' : modelstar,
            'studio'    : studio,
            'collection': collection,
            'order'     : order,
            'since'     : since,
            'user_email': user_email,
            'id_post'   : id_post,
            'posts_grouped_by': posts_grouped_by,
            'prime_random'    : prime_random_key,
            'prime_group'     : prime_group_key,
            'trash_display'   : trash_display,
            'sql_search'      : sql_search
        },
        success: function(response) {
            // alert(response);
            $('#page').append(response);
            flag += quant;
        }
    });
}

2 - WHEN THE METHOD IS CALLED:

        load_posts(0, prime_random, prime_group);

        $(window).scroll(function(){
            if($(window).scrollTop() >= $(document).height() - $(window).height()) {

                load_posts(flag, prime_random, prime_group);

            }
        });

3 - RESPONSE TO AJAX REQUEST TO BE ATTACHED TO BODY:

<div class="grid-item printed_album printed_album_<?= $col['id_post'] ?>" >

    <!-- picture -->
    <a class="pics" href="http://localhost/xsite/<?= $path ?>/<?= $col[$field] ?><?php if($post_head){echo('/'.str_replace(' ', '-', strtolower($col['head'])));} ?>">
        <img src="http://localhost/app/content/pic/<?= $col['dir'] ?>/<?= $col['file'] ?>.jpg"/>
    </a>  

</div>

4 - DIV RECEIVING THE APPEND

<section id="page" class="grid" >

</section>

5 - CSS

section {
    column-count: 6;

    padding-top: 6px;
    padding-bottom: 6px;

    margin-left: auto;
    margin-right: auto; 

}

section .pics {

    display: block;
    margin-top:  4px;
    margin-left: 1px;

}

6 - MASONRY GRID I GOT FROM THE SITE AND DIDN’T WORK:

<script src="/path/to/masonry.pkgd.min.js"></script>

<script>
  $('.grid').masonry({
    itemSelector: '.grid-item'
  });
</script>

Answer 1

I think to do this, do not need a plugin, maybe a method that checks your page and scroll, example:

function scrollPage() {

     window.onscroll = function(e) {

                    var raw = this;

                    var supportPageOffset = window.pageXOffset !== undefined;
                    var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");

                   var scrollTop = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
                   var offsetHeight = window.pageYOffset;
                   var scrollHeight = document.documentElement.scrollHeight;

                    var dois_tercos = ((window.innerHeight / 3) * 2);

                    var soma = (scrollTop + window.innerHeight + dois_tercos);

                   if ((soma) >= scrollHeight) {
                       scrollPage();
                    }

    }
}

Then just load the data in the query inside a container and call this function at the end of the request... scrollPage();

Better than being append in javascript, you make straight in api... much less risk of breaking on screen.

Then just grid using pure CSS.

Example