Masonry jQuery Plugin Not Working

Question

I'm trying to apply Masonry to this batch of code:

<?php 
//If There Are No Posts In The DB
if(condition) : ?>
    <p> There Are Currently No Posts On This Site.</p> 
    <?php
    //If There Are Posts In The DB - Loop Through All The Posts
    else : ?>   
        <div id="masonry-grid">
        <div class="gutter-sizer">
    <?php foreach ($a as $b) :
        <div class="grid-item">
        <img src="source/of/the/image">
        </div>
    <?php endforeach; ?>
        </div>
        </div>
        <script>
        $(document).ready(function(){
var $container = jQuery('#masonry-grid');
$container.masonry({
columnWidth: 200,
itemSelector: '.grid-item'
});
});
    </script> 
<?php endif;?>

It doesn't quite line up the images in the way masonry is suppose to. I've checked my classes and id's match as per here, and that my jQuery + Masonry files are loaded correctly (in a separate header file) as per here.

I'm contemplating whether this is a question of code placement within the document, but changing it's location doesn't quite seem to solve the problem.

Answer 1

Added the includes on top of the scirpt - and works like a charm.

<script src="<?=base_url();?>includes/js/jquery.min.js"></script>
<script src="<?=base_url();?>includes/js/masonry.pkgd.js"></script>   
<script>
--Scripty Script--
</script>