Masonry in WordPress

javascript-masonry.php

<?php
//Masonry load scripts
function wpb_masonry_scripts_styles_alt() {
	wp_enqueue_script ( 'masonry'); //jqueryless
}

add_action( 'wp_enqueue_scripts', 'wpb_masonry_scripts_styles_alt' ); 

//Masonry Style javascript
function wpb_js_masonry() { ?>

	<script>
		var container = document.querySelector('.home .content'); //set container
		var msnry;
		// initialize Masonry after all images have loaded
		imagesLoaded( container, function() {
		  msnry = new Masonry( container, {
		  	itemSelector: '.entry', //set target
		  });
		});</script>
<?php
}
add_action( 'wp_footer','wpb_js_masonry', 20);//add priority to push it below masonry script

masonry-init.js

// Settings Masonary
jQuery( document ).ready( function( $ ) {
    $( '.content' ).masonry(  );//targets the posts container
} );

masonry-pagination.css

/*override masonry*/
.archive-pagination {
	position: relative !important;
	top: 0 !important;
}

masonry-pagination.js

//shift pagination out of container
jQuery(function( $ ){
	$('.archive-pagination').insertAfter(".content-sidebar-wrap");
});

//ref- http://api.jquery.com/insertafter/

masonry-scripts.php

<?php

//Masonry load scripts
function wpb_masonry_scripts_styles() {
	wp_enqueue_script ( 'jquery-masonry');
	wp_enqueue_script ( 'masonry-init' , get_stylesheet_directory_uri() . '/js/masonry-init.js', array('jquery-masonry'), '1', true );
}

add_action( 'wp_enqueue_scripts', 'wpb_masonry_scripts_styles' ); 

masonry.css

.home .entry {
	background: #f8f9fa;
	margin: 0 1.5% 30px !important;
	padding: 3%;
  	width: 100%;  
}
/* 3 Up on devices ipad portrait plus */
@media only screen and (min-width: 768px) {
	.home .entry {
	width: 30%;  
	}
}