Cacher is the code snippet organizer for pro developers

<div id="lazyload" class="grid_12">
<?php
  $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
  $query_args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'paged' => $paged
  );
?>
  <?php if (have_posts()) { ?>
    <div class="page" id="p<?php echo $paged; ?>">
    <?php while (have_posts()) { the_post(); ?>
      <article id="post-<?php the_ID(); ?>" <?php post_class('entry') ?>>
        <header class="entryheader">
          <h2 class="entrytitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        </header>
        <div class="entrycontent">
          <?php the_excerpt(); ?>
        </div>
      </article>
    <?php } ?>
    </div>
  <?php } ?>
</div>
<div id="spinner">
  <img src="loading.gif">
</div>
<script>
  jQuery(function(){
    var page = 2;
    var loadmore = 'on';
    jQuery(document).on('scroll resize', function() {
      if (jQuery(window).scrollTop() + jQuery(window).height() + 60 > jQuery(document).height()) {
        if (loadmore == 'on') {
          loadmore = 'off';
          jQuery('#spinner').css('visibility', 'visible');
          jQuery('#lazyload').append(jQuery('<div class="page" id="p' + page + '">').load('/?paged=' + page + ' .page > *', function() {
            page++;
            loadmore = 'on';
            jQuery('#spinner').css('visibility', 'hidden');
          }));
        }
      }
    });
    jQuery( document ).ajaxComplete(function( event, xhr, options ) {
      if (xhr.responseText.indexOf('class="page"') == -1) {
        loadmore = 'off';
      }
    });
  });
</script>

<?php
/**
 * Template Name: Our Brands
 */
global $post;
$slug = get_post( $post )->post_name;

get_header(); ?>

	<?php while ( have_posts() ) : the_post(); ?>

		<?php the_content(); ?>

	<?php endwhile; // end of the loop. ?>

<div id="brands">
    <div class="container-fluid" >
        <div class="row page">
            <?php
                if ( get_query_var( 'paged' ) )
                    $paged = get_query_var('paged');
                else if ( get_query_var( 'page' ) )
                    $paged = get_query_var( 'page' );
                else
                    $paged = 1;

                $per_page    = 4;
                $num_pages   = ceil(count(get_terms('brand', array('hide_empty'=>false))) / $per_page);
                $offset      = $per_page * ( $paged - 1) ;

                // Setup the arguments to pass in
                $args = array(
                    'order'        => 'ASC',
                    'orderby'      => 'menu_order',
                    'hide_empty'   => false,
                    'offset'       => $offset,
                    'number'       => $per_page
                );

                // Gather the series
                $series = get_terms( 'brand', $args );

                // Loop through and display the series
                foreach($series as $s)
                {
                    $theurl = get_term_link($s, 'brand');

                    $image = get_field('logo', $s);
                    $url = $image['sizes']['medium'];
                    $alt = $image['alt'];

                    if( !empty($image) ):
                        echo "
                            <div class='col-xs-4 col-sm-2 brand'>
                                <a href='$theurl'>
                                    <img class='shoe' src='http://placehold.it/120'/>
                                    <img class='logo' src='$url' alt='$alt' />
                                </a>
                            </div>
                        ";
                    endif;
                }
            ?>
        </div>
    </div>
</div><!-- brands -->

<?php if($num_pages > 1): ?>
    <div id="lazy-arrow">
        <span class="arrow"></span>
        load more
    </div>
<?php endif; ?>

<?php // jQuery for lazy loading posts ?>
<script>
    var page = 2;
    var maxPages = <?php echo $num_pages ?>;
    var loadmore = 'on';

    function loadPosts() {
        if (loadmore == 'on') {
            loadmore = 'off';
            jQuery('.fa-chevron-down').addClass('fa-spinner').addClass('fa-spin').removeClass('fa-chevron-down');
            jQuery('#lazy-arrow').css('visibility', 'visible');
            jQuery('#brands .container-fluid').append(jQuery('<div class="row page">').load('<?php echo esc_url(home_url( '/' )) . $slug; ?>/page/' + page + ' .brand ', function () {
                page++;
                loadmore = 'on';
            }));
        }
    }

    // load more posts if near bottom of screen
    jQuery(document).on('scroll resize', function () {
        if (jQuery(window).scrollTop() + jQuery(window).height() + 60 > jQuery(document).height()) {
            loadPosts();
        }
    });

    // load more posts if user clicks on arrow
    jQuery('#lazy-arrow').click(loadPosts());

    // ajax callback gunction on completion
    jQuery(document).ajaxComplete(function (event, xhr, options) {
        // if (xhr.responseText.indexOf('class="row page"') == -1) {
        //       loadmore = 'off';
        // }
        jQuery('.fa-spinner').addClass('fa-chevron-down').removeClass('fa-spinner').removeClass('fa-spin');
        if ( page > maxPages) {
            loadmore = 'off';
            jQuery('#lazy-arrow').css('visibility', 'hidden');
        }
    });
</script>

<?php get_footer(); ?>