0

I've downloaded the latest version of masonry and copied the instructions from the website, but masonry doesn't appear to be loading on my site. The images are floated next to each other, but they aren't lined up correctly. Here is my code.

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/masonry-docs/masonry.pkgd.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/masonry-docs/masonry.pkgd.min.js"></script>

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

CSS

div#grid {
    margin: 0 auto;
    overflow: hidden;
    width: 95%;
}

div.grid-item {
    display: block;
    float: left;
    margin: 5px;
    width: 300px;
}

div.grid-item img {
    width: 300px;
}

HTML

<div id="grid">
    <div class="grid-item"><img src="example1" /></div>
    <div class="grid-item"><img src="example2" /></div>
</div>

Edit: this is what my page looks like. https://i.stack.imgur.com/eEaWL.jpg

Jordan U.
  • 313
  • 1
  • 5
  • 16

1 Answers1

1

In your script, you're targeting a class ($(".grid")) instead of the id that's in the code (<div id="grid">).

Change $(".grid") to $("#grid") and it should work as far as I can see from given code. Also notice that you're importing the scripts twice.

EDIT

I have a working example here, without the imagesLoaded part, because as of this answer on another question here at SO it's a separate library. Please add it to your imports, or do not use it all.

Community
  • 1
  • 1
Roy
  • 7,811
  • 4
  • 24
  • 47
  • I just verified that it was set that way (I wrote the code I posted here by hand after copying everything else) and it still doesn't work. – Jordan U. Jan 20 '17 at 07:27
  • I deleted that line of code, and it still isn't working properly. On the page I made, the 4th and 5th images are set far lower compared to the 6th image I have (though they are lined up next to eachother) – Jordan U. Jan 20 '17 at 08:02
  • 1
    @JordanU. What do you see in your console? – Roy Jan 20 '17 at 09:04
  • 1
    Found the issue. It was the semicolon next to the column width value. Thank you for your help. – Jordan U. Jan 20 '17 at 14:15