Question

I can’t seem to get masonry plugin to work, i have tried for hours now..
I don’t have any javascript errors.
This is my code (now, not only at the basics but even like on the documentation page)

HTML:

<div class="container">

<div class="item"></div>
<div class="item" style="height:320px;"></div>
<div class="item"></div>
<div class="item" style="height:300px;"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>


</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.masonry.min.js"></script>
<script type="text/javascript">
    $(function(){
    $('#container').masonry({
        // options
        itemSelector : '.item',
    });
});
</script>

CSS:

body {
margin: 0;
padding: 0;
width: 1310px;
margin:0 auto;
background-color: #212121;
}
.container {
width: 1302px;
margin: 0 auto;
position: absolute;
}
.item {
width: 220px;
height: 200px;
margin: 10px;
float: left;
background-color: #fff;
padding: 10px;
border-radius: 5px;
}

Any help is much appreciated,

Thank you.

Answer 1

$('#container').masonry({ //no element in the dom with id=container
    // options
    itemSelector : '.item',
});

Your css selector is wrong. You’re addressing it as #container which refers to the id, but there is no id specified on that element, only a class .container

Either change the selector to $('.container') or add an id attribute (i.e. <div id="container"> and you should be good to go.