jquery Masonry - Not working

Question

Please can someone tell me where I'm going wrong with my jQuery masonry code. I've posted the link to my test page below:

http://davidlloydphotography.com/home.html

I have followed the step by step guide the Masonry website ( http://masonry.desandro.com/ ). I think it might be how I'm initialising the jQuery, not sure where it goes, the tutorial is not clear:

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 700
});

No idea why it won't flow into the layout, the placeholder images just hang to the left :(

Any help would be greatly appreciated I've been at this for days, its got to be a simple problem.

Answer 1

You should use only one version of jQuery, (not 2 depending on the browser) and put your js at the bottom of the page and load masonry with "document ready". If you are loading many images, consider using imagesloaded as well.

HTML:

 <div id="grid">
 <div class="grid-item">
        <img src="http://lorempixum.com/200/200/food/1" alt="" />
    </div>

    <div class="grid-item">
        <img src="http://lorempixum.com/200/150/food/10" alt="" />
    </div>

    <div class="grid-item">
        <img src="http://lorempixum.com/200/250/food/3" alt="" />
    </div>
 </div>
 </div>

JS:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>  

<script>
 $(document).ready(function() {
 $('#grid').masonry({
 // options
  itemSelector: '.grid-item',
 columnWidth: 700
});
});
</script>