Struggling to make masonry work for the first time, as it is only displaying as a single column. Being more of a designer than a developer, it's possible that I'm overlooking something. Here is the code snippet I'm using:
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<div id="container">
<div class="masonryImage">
<img src="img/masonry_001.jpg">
</div>
<div class="masonryImage">
<img src="img/masonry_002.jpg">
</div>
<div class="masonryImage">
<img src="img/masonry_003.jpg">
</div>
<div class="masonryImage">
<img src="img/masonry_004.jpg">
</div>
<div class="masonryImage">
<img src="img/masonry_001.jpg">
</div>
<div class="masonryImage">
<img src="img/masonry_002.jpg">
</div>
<div class="masonryImage">
<img src="img/masonry_003.jpg">
</div>
<div class="masonryImage">
<img src="img/masonry_004.jpg">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script>
$(function(){
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
itemSelector: 'masonryImage'
});
});
</script>
</body>
And here is the CSS style:
#container {
width: 1200px;
margin: 0 auto;
}
.masonryImage { width: 25%; }