Jetpack Infinite Scroll Not Loading Posts

I am very frustrated I have tried all sorts of things but I cannot get jetpack infinite scroll to work with my page. I created a child theme based off of Twenty Thirteen.

I want to use IS on a page that is using a page template from my file masonry.php and content-masonry.php. This page template is pretty much the same as a blog page and grabs every post in order from most recent to least.

Here is the link to what I have: https://webshowcase.tk/wp1/?page_id=77

The page works fine with next and older posts but when I try to use IS it doesn’t load anything after the initial posts. Currently this is what I have in my functions.php file:

//Infinite Scroll I only want it on this page.
function ws_infinite() {
    $supported = current_theme_supports( 'infinite-scroll' ) && ( is_page(77) );

    return $supported;
}
add_filter( 'infinite_scroll_archive_supported', 'ws_infinite' );

//render function
function ws_infinite_scroll_render() {
    get_template_part( 'content-msloader' );
}

add_theme_support( 'infinite-scroll', array(
'container'  => 'container-masonry',
'footer'     => 'page',
'render' =>		'ws_infinite_scroll_render',
) );

what I have contained in content-msloader.php is this:

<!-- Start the Loop. -->
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content-masonry', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentythirteen_paging_nav(); ?>
<?php endif; ?>

and in content-masonry.php which is the post template part for masonry.php contains:

<?php
/**
 * home template for displaying content
 *
 * Used for both single and index/archive/search.
 *
 * @package WordPress
 * @subpackage Twenty_Thirteen
 * @since Twenty Thirteen 1.0
 */
?>

 <?php
//Preview Size Image
 if ( has_post_thumbnail() ) {
  $image_id = get_post_thumbnail_id();
  $image_url = wp_get_attachment_image_src($image_id,'homepage-preview');
  $url = $image_url[0];
 }
 else $url = get_bloginfo('stylesheet_directory').'/images/home-preview-default.jpg'
 ?>

  <?php
//Thumb Size Image
 if ( has_post_thumbnail() ) {
  $image_id = get_post_thumbnail_id();
  $image_url = wp_get_attachment_image_src($image_id,'homepage-thumb');
  $url2 = $image_url[0];
 }
 else $url2 = get_bloginfo('stylesheet_directory').'/images/home-thumb-default.jpg'
 ?>

<!---------------------Grid Posts---------------------->
         <div class="brick">
          <section id="section1">
            <div class="brick_header">
            <a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
            <?php the_title(); ?></a>
            </div>

            <div class="brick_featured_image">

             <a href="<?php the_permalink() ?>" rel="bookmark" title="Click to view: <?php the_title_attribute(); ?>">
          <img src="<?php echo $url2; ?>" alt="<?php the_title(); ?>"/>

            </a>
            </div>
		</section><!--end section 1-->
        <section id="section2">
         <p>
        <?php echo get_the_excerpt(); ?>
        </p>
        <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>" class="read_more_link">Read More</a>
        </section>
    </div>

Any help or suggestions or anything that can point me in the right direction is much appreciated.