WP-Ajax Loadmore Posts

ajax.js

jQuery(function($){
	let canBeLoaded = true,
	    bottomOffset = 2000;

	$(window).on( 'scroll', function(){
		let data = {
			'action': 'loadmore',
			'query': ajaxposts.posts,
			'page' : ajaxposts.current_page
		};
		if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){
			$.ajax({
				url : ajaxposts.ajaxurl,
				data: data,
				type:'POST',
				beforeSend: function( xhr ){
					canBeLoaded = false;
				},
				success:function(data){
					if( data ) {
						// Locate the last row of your output to append your ajax php.
						$('.row').find('.col-md-4:last-of-type').after( data ); // Put container and wrapper classes here.
						canBeLoaded = true;
						ajaxposts.current_page++;
					}
				}
			});
		}
	});
});

functions.php

<?php
add_action( 'wp_enqueue_scripts', 'duck_diver_custom_ajax', 99 );
function duck_diver_custom_ajax() {
    
    global $wp_query;
        
		wp_localize_script( 'duck-custom', 'ajaxposts', array(
			'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
            'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
            'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
            'max_page' => $wp_query->max_num_pages,
            'is_archive' => is_archive()
			));	
    
}

add_action( 'wp_ajax_nopriv_loadmore', 'duck_infinite' );
add_action( 'wp_ajax_loadmore', 'duck_infinite' );
/**
 * Ajax Load More Function
 *
 * @return void
 */
function duck_infinite() {
	$args                = json_decode( stripslashes( $_POST['query'] ), true );
	$args['paged']       = $_POST['page'] + 1; // we need next page to be loaded.
	$args['post_status'] = 'publish';
	$args['offset']      = ( $_POST['page'] * 9 ) + 1; // This sets the offset based on page number - not required if not using offset.
	$featured_size       = ( get_theme_mod( 'dd_featured_blog_image' ) ) ? get_theme_mod( 'dd_featured_blog_image' ) : 'large';
	$featured_class      = ( 'large' === $featured_size ) ? 'col-12' : 'col-md-4';
	query_posts( $args );
	if ( have_posts() ) :
		// run the loop.
		while ( have_posts() ) :
			the_post();
			?>
			
			<div class="col-md-6">
				<article id="post-<?php the_ID(); ?>" <?php post_class( 'post__holder my-3 card' ); ?>>
					<?php if ( ! is_singular() ) : ?>
					<header class="post-header card-header">
						<h2 class="post-title">
							<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
						</h2>
					</header>
					<div class="card-body">
						<div class="row">
							<div class="<?php echo esc_attr( $featured_class ); ?>">
								<?php
								endif;
					if ( has_post_thumbnail() ) {
						echo '<figure class="featured-thumbnail thumbnail">' . get_the_post_thumbnail() . '</figure>';
						$post_class = ( 'large' === $featured_size ) ? 'col-12' : 'col-md-8';
					} else {
						$post_class = 'col-12';
					}
					?>
							</div>
							
							<?php if ( ! is_singular() ) : ?>
								<!-- Post Content -->
								<div class="<?php echo esc_attr( $post_class ); ?>">
									<div class="post_content">
										<?php the_content(); ?>
									</div>
								</div>
							<?php else : ?>
							<!-- Post Content -->
							<div class="post_content">
								<?php the_content( '' ); ?>
								<div class="clear"></div>
							</div>
						</div>
					</div>
					<!-- //Post Content -->
				<?php endif; ?>
				
				</article>
			</div>
		
			<?php
		endwhile;

	endif;
	die; // here we exit the script and even no wp_reset_query() required!
}