jQuery Masonry not working.
jquery, jquery-masonry
Solution
Remove your `columnWidth` property and Masonry will use the width of the first item element. (Docs).
Check out this JSFiddle. http://jsfiddle.net/s8PhS/14/
If you resize the HTML container in JSFiddle it will also resize dynamically. I also added some extra `<div>` elements for demo purposes and a `Odd Five element` with a different height, and you can see the masonry plugin kicks in and position's the elements perfectly.
So basically, remove the property `columnWidth: 250` and let Masonry pick it up dynamically.
In JSFiddle, this seems to solve your problem.
Just a tip: I used this same jquery.masonry plugin recently, but also wanted to sort my elements, I found this amazing plugin called Isotope which is amazing and much more customizable.
Check out the Demo on the Homepage!
Problem
I had it working but for some reason it has just stopped working and I don't know what I have done.The box `divs` are floated left, I just don't know where I've gone wrong. Jquery ``` var $container = $('.work'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector: '.box', isAnimated: true, columnWidth: 250 }); }); ``` HTML ``` <div id="part-one" class="work"> <div class="box col2"><img src="_assets/images/one.jpg" alt="" /></a></div> <div class="box col2"><img src="_assets/images/two.jpg" alt="" /></a></div> <div class="box col2"><img src="_assets/images/three.jpg" alt="" /></a></div> <div class="box col2"><img src="_assets/images/four.jpg" alt="" /></a></div> <div class="box col2"><img src="_assets/images/five.jpg" alt="" /></a></div> </div> ``` CSS ``` .work { margin-left:98px; top:0; max-width:1600px; padding-bottom:100px; position:absolute; } ```