JQuery. Lazyload +masonry improved waterfall code

The implementation method is as follows :(here only send jquery, please imagine the relevant HTML code, I will not send, haha)

var $container = $('#main');
$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth:205,
    gutterWidth:10,
    isAnimated: true
  });
});
var pre_href;
// rolling 
$(window).scroll(function(){
  //When scrolling to 100 pixels above the bottom, load new content
  if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {
    ajax_load_data();
  }
});
 
function ajax_load_data(){
  var href = $('#page-nav').find('.nextprev').attr('href');
  if(href && href != pre_href){
    console.log('href = '+href);
    pre_href = href;
 
    $.ajax({
      url:href,//Gets the address of the list of elements
      data:{'act':'ajax_wap_index'},
      dataType:'json',
      type:'post',
      beforeSend:function(){
        show_loading_body();
      },
      complete:function(){
        show_loading_body();
      },
      success:function(data){
        if(data.status != undefined && data.status == 'ok'){
          if(data.html){
            var $boxes = $( data.html );
            $container.append( $boxes ).masonry("appended", $boxes, true);//Additional elements
            $container.imagesLoaded(function () {
              $container.masonry();
            });//When the images are loaded, they are automatically rearranged. [here is the point]
          }
 
          if(data.str_pages){
            $('#page-nav').html(data.str_pages);//Set the address of the next page. [you can supplement by yourself]
          }
        }
      }
    });
  }
}