jQuery, Masonry stacking?

I'm aft开发者_开发技巧er a bit of help with my site : http://www.lovejungle.com/dev/testenvironment/?cat=5

I was under the impression that jQuery Masonry stacked the objects tightly - for some reason when I randomize the div box's I get big open spaces between them?

Can anyone see why this is happening?

Basically i'm looking to create a similar site to this one: http://www.jwt.com/

Let me know if you need any code or more information and i'll respond promptly!

Cheers!

Michael

Quoting from the jQuery Masonry website:

Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid.

So, basically, your elements would fit nicely only if the width of all your elements are kept the same. Just as how float would fit nicely, if the height of all the elements are the same. You can observe this effect at the site you've mentioned: http://www.jwt.com/ where all the stacked elements have the same width. :)

HTH.

EDIT: This also means that your elements can have widths that are multiples of the other elements in the grid. You could have a large element that is 3x the width of your normal element.

I have to say that I am not completely familiar with how Masonary works internally, but there are two things that I have noticed on your site that might help with this issue:

1. I noticed that your columns are numbered col2 - col4. In your javascript you specify your columnWidth attribute to be 200px, which means each of the columns have a width that is a multiple of 200. I am not sure if the source assumes that col1 will be 200, col2 will be 400, etc... So, maybe try numbering your columns to begin from col1 rather than col2.

2. I noticed that you columns are not exactly 200 pixels in width or an exact multiple. You need the margin + padding + width to be 200. From your CSS it seems that this is not the case as can be seen from the following example:

Col2:

width = 170px padding on box = 10px you add a margin in your js = 10px

This gives you

170 + 10 + 10 + 10 + 10 = 210px

The same is true for the other columns too.

I am not saying that fixing the above two will fix the issue that you are experiencing, but it is worth a try.