Images not stacking properly

Question

I'm using jquery masonry and having trouble getting images/posts to stack properly (see attached image). The problem is that there is too much white space/ gap between the posts/images. How can I fix this? Thanks, Faisal INDEX.HTML.ERB ```

<% @posts.each do |post| %>

<%= post.body %>
<%= post.title %>
RSVP -- <%= post.job %>.
Created <%= time_ago_in_words(post.created_at) %> ago.

Accepted Answer

JSfiddle would be good, also try using the

`$(window).load(function() {`

as egasimus pointed out...

`$(document).ready(function()`

won't work, but the (function() bit is the one I'd try first. You can 'fiddle' with `gutterWidth` as well (masonry).

UPDATE:

I've forked the jsfiddle you made, cleaned up some of the code (a lot of redundant javascript etc) and got it to work. I've used the suggestions at masonry etc, but should make sense. Check out the fiddle for working version:http://jsfiddle.net/8KHAh/11/

```
$(function(){
  $('#container').masonry({
    // options
    itemSelector : '.item',
    columnWidth : 226
  });
});
```

Make sure you use similar CSS or adjust the `columnWidth` to adjust for padding etc.

Images not stacking properly

Solution

Problem