What am I missing from this jQuery Masonry implementation?
jquery, jquery-masonry, jquery-plugins, tumblr
Solution
The Masonry script you provided here seems OK (the one in the link you provided is faulty). Try just moving it to the bottom of the document, right before the closing tag for 'body'
...</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script>
<script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script>
<script type="text/javascript">
var $posts = $('.posts');
$posts.imagesLoaded( function(){
$posts.masonry({
itemSelector : '.entry',
columnWidth: 300
});
});
</script>
</body>
</html>
Problem
I've sifted through the plethora of Masonry posts here on stack, and view-sourced other tumblr blogs, but am unable to recognize what I am missing. Hopefully one of you can help. The site in question is available here for visual reference (note: 1 or 2 fashion swimsuit photos - tame but potentially NSFW for some). As you can see, the images are still not vertically stacking properly. Where have I gone wrong? CSS ``` #wrapper { width: 960px; margin: 0 auto; background: #000; height: 400px; } #wrapper .posts { background: #ff9900; width: 950px; position:relative; height:100%; } #wrapper .entry { width: 300px; float: left; } ``` Masonry Script ``` <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script> <script type="text/javascript"> var $posts = $('.posts'); $posts.imagesLoaded( function(){ $posts.masonry({ itemSelector : '.entry', columnWidth: 300 }); }); </script> ```