How to implement a mansory grid and Infinite scroll together?

I'm developing a Pinterest style website but I'm not able to put these two features together.

To do the infinite scroll, I used jQuery with AJAX to pull the database posts and append them to the body. I basically copied this formula here: link

And to do the mansory grid, I stylized the body with column-count: 6. Basically, I copied this idea here: link

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

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

Before:

1,3,5
2,4,6

Then:

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 a type effect like this:

Before:

1,2,3
4,5,6

Then

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: link And it's pretty easy to deploy:

<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 does not work correctly 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 vague vertical space outside it. So:

NOTE:Andthiseffectofloadingthepostshorizontallycannotbedonethroughflexbox,unfortunately.Becauseifthepostshavedifferentheights,itwillfallintothesameproblemasabove.

Well,thatsamesiteaboveoffersanalternativetotheinfinitescrollthatshouldprobablymarrythemasonrymethod.Here'sthelink: link

But I did not understand it, I could not implement it.

Anyway, I know that long and blurred issues in stackoverflow are penalized, but notice that deep down my question is quite objective. I want to reconcile these two features in a very simple and practical way, but I do not know how to do it.

EDIT: At the request of college 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 - ANSWER THE AJAX REQUIREMENT THAT WILL BE INCLUDED IN THE 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 WILL RECEIVE 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 THE SITE AND DID NOT WORK:

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

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