Overlapping images/ position not coming out right when using Jquery Masonry on Rails 3 app

Question

I'm using jquery masonry to place images on my website, but running into trouble.

The images are showing up on top of each other. Here is a link to the live website:

http://www.faisalandsamreen.com/meetus

If you do a hard refresh a few times, you will see the images move around every time.

JS fiddle version is here:

http://jsfiddle.net/8n76g/

What am I doing wrong???

Thanks,

Faisal

Answer 1

I think I had the same problem that you are having.

You need to put your masonry code in a $(window).load(function(){ }) block. It is not the rails way to put a script inline with your HTML. The problem is that your scripts are probably being loaded and called before the images have downloaded, so masonry can't work out what size they are. This function will only be called once the images are downloaded, and it will then be able to lay them out correctly.