I'm using JQuery and Masonry and as you can see from the image the boxes doesn't stack properly. The side margins are great but the top/bottom gives random amount of large space in between.
Anybody who can help me here?
CSS for the boxes:
div.article {
background-color: white;
margin-right: 6px;
padding: 20px 10px;
width: 155px;}
Screenshot of problem: https://skitch.com/subzane/f8n36/2010-andreas-normans-blogg
Solution: It seems the error only appeared when using custom fonts. And to fix that, the script must be loaded using Using $(window).load() instead of $(document).ready().
Assuming div.article is also your masonry item selector, you need to have it floated left.
I know this is an ancient question, but I had this exact problem. The solution, in my case, was adding the width/height to the images that were within some if my item containers.
Yes, window.load() works but as I've dug more I found that there was an input type hidden in between some of the items. Take a look if you have any tag in between of your item list.
来源：https://stackoverflow.com/questions/6511203/top-bottom-margin-with-masonry-stacking