Geek Answers Handbook

JQuery Freemasonry is not working.

I had a job, but for some reason it just stopped working, and I don’t know what I did. A box of divs floats to the left, I just don't know where I made a mistake.

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; }
+4
source share
2 answers

Remove the columnWidth property, and Freemasonry will use the width of the first element of the element. ( Docs ).

Check out the JSFiddle . http://jsfiddle.net/s8PhS/14/

If you resize the HTML container in JSFiddle, it will also be dynamically resized.
I also added some additional <div> elements for demo purposes and Odd Five element with different heights, and you can see how the Freemasonry plugin launches and positions elements perfectly.

So basically, remove the columnWidth: 250 property and let Freemasonry raise it dynamically.

In JSFiddle, this seems to solve your problem.

Only advice . I recently used the same jquery.masonry plugin, but also wanted to sort my elements, I found this awesome plugin called Isotope , which is awesome and much more customizable.

Check out the demo on the home page!

+6
source

this is similar to the masonry column width property and the space available for displaying the div. Trying to play with your jsfiddle will think about it. Good luck.

0
source

More articles:


All Articles