Loaded previews in the masonry grid are not assigned block positions?

Question

JavaScript

Newly uploaded previews go anywhere

HERE

start scrolling

infinite scroll
documentation masonry documentation index.php

code:

<?php get_header(); ?>

<div id="content"><div class="popup-loader"></div>
<div id="content_masonry">
    <?php if ( have_posts() ) {  while ( have_posts() ) { the_post(); ?>
        <?php get_template_part('loop'); ?>
      <?php } ?>
    <?php } ?>
    <div id="page-nav"><?php next_posts_link() ?></div>
</div>
</div>
<?php get_sidebar();  ?>
<?php get_footer();  ?>

The script that does all this magic:

var $boxes = $('.loop');

  var $container = $('#content_masonry');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();
    $( ".popup-loader" ).hide();

    $container.masonry({
        itemSelector : '.loop',
        columnwidth: 300,
        gutter: 23,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransforms
    });    
  });


var msnry = $container.data('masonry');

$container.infiniteScroll({
  path: '#page-nav a',
  append: '.loop',
  outlayer: msnry,
  history: false
});

Similar questions:
https://toster.ru/q/58656
https://toster.ru/q/372505
https://toster.ru/q/463268

There are some solutions but I don't understand scripts
I'm an artist )

I don’t know what’s wrong ..
Please take a look

Answer 1

$(function () {

var $boxes = $('.loop');

  var $container = $('#content_masonry');
  $container.imagesLoaded( function() {
    $boxes.fadeIn();
    $( ".popup-loader" ).hide();

    $container.masonry({
        itemSelector : '.loop',
        columnwidth: 300,
        gutter: 23,
        isFitWidth: true,
        isAnimated: !Modernizr.csstransforms
    });    
  });


var msnry = $container.data('masonry');

$container.infiniteScroll({
  path: '#page-nav a',
  append: '.loop',
  outlayer: msnry,
  history: false
});

});