I've been struggling to make the masonry plugin work for hours now. I've checked my code thoroughly and there are no javascript errors present. I have followed the instructions provided, but it's still not working as expected.
Here is a snippet of my 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>
And here is a snippet of my 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;
}
If anyone has any insights or suggestions on what could be causing this issue, please let me know. Your help is greatly appreciated. Thank you.