Oblique theme repeater template

I am close to having it working. I combined code from the index.php and content.php files. The problem I am having now is that the thumbnail posts are displaying in one straight column and not spreading out into the responsive grid (depending on the size of the screen it can span from one to three columns). The other thing I need to figure out is how to start pulling in posts after the 9th post. Right now with the code below it displays it from the first post which is repeating what was already displayed prior to the load more plugin triggering.

This is the code I have right now in the repeater template:

<?php

/**
 * @package Oblique
 */
?>

			<?php /* Start the Loop */ ?>

<div id="ob-grid" class="grid-layout">

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

				<?php
					/* Include the Post-Format-specific template for the content.
					 * If you want to override this in a child theme, then include a file
					 * called content-___.php (where ___ is the Post Format name) and that will be used instead.
					 */
					get_template_part( 'content', get_post_format() );
				?>

			<?php endwhile; ?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="svg-container post-svg svg-block">
		<?php echo oblique_svg_3(); ?>
	</div>	

	<?php if ( has_post_thumbnail() && ( get_theme_mod( 'index_feat_image' ) != 1 ) ) : ?>
		<div class="entry-thumb">
			<?php the_post_thumbnail('oblique-entry-thumb'); ?>
			<a>" title="<?php the_title(); ?>" ><i class="fa fa-link"></i></a>
		</div>
	<?php endif; ?>	

	<?php if ( has_post_thumbnail() && ( get_theme_mod( 'index_feat_image' ) != 1 ) ) : ?>
	<div class="post-inner">
	<?php else : ?>
	<div class="post-inner no-thumb">
	<?php endif; ?>
		<header class="entry-header">
			<?php the_title( sprintf( '<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>' ); ?>

			<?php if ( 'post' == get_post_type() && !get_theme_mod('meta_index') ) : ?>
			<div class="entry-meta">
				<?php oblique_posted_on(); ?>
			</div><!-- .entry-meta -->
			<?php endif; ?>
		</header><!-- .entry-header -->

		<div class="entry-content">
			<?php the_excerpt(); ?>

			<?php
				wp_link_pages( array(
					'before' => '<div class="page-links">' . __( 'Pages:', 'oblique' ),
					'after'  => '</div>',
				) );
			?>
		</div><!-- .entry-content -->
	</div>
	<?php if (!get_theme_mod('read_more')) : ?>
	<div class="read-more">
		<a>"><?php echo __('Continue reading …','oblique'); ?></a>
	</div>
	<?php endif; ?>
	<div class="svg-container post-bottom-svg svg-block">
		<?php echo oblique_svg_1(); ?>
    </div>	</div>
</article><!-- #post-## -->

Hi dcooney,

I can’t figure out how to add the masonry layout. I found that you had explained how to in another post to someone else but honestly I am not great when it comes to JavaScript and I just can’t figure it out.
In the post I found, you had said to use the reload function and provided the code to enter into a .js file.
I tried creating a new file to enter in the code and then I tried entering it into the masonry-int.js file. Nothing worked.

From what I can tell “grid-layout” is the call to the masonry layout in the oblique theme but when I try to use it in the repeater template it doesn’t do anything.

This is the post I am referring to:
https://connekthq.com/plugins/ajax-load-more/examples/masonry/#javascript

If anyone ever figures this out for the Oblique theme I would still love to get it working and would be grateful.