Images do not stack properly

Question

I am using jquery masonry and have problems loading images / messages correctly (see attached image).

The problem is that there are too many spaces / spaces between messages / images.

How can i fix this?

Thanks,

Faisal

index.html.erb

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="/assets/jquery.js"></script> <script src="/assets/jquery.masonry.min.js"></script> <style> .item { width: 200px; margin: 8px; float: left; border: 1px solid #999999; background-color: #F7F7F7; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding: 6px; color: black; } </style> <div id="container"> <br /> <br /> <br /> <% @posts.each do |post| %> <div class="item"> <%= post.body %> <br /> <%= post.title %> <br /> <i>RSVP -- <%= post.job %>.</i> <br /> <i>Created <%= time_ago_in_words(post.created_at) %> ago.</i> </div> <script type="text/javascript"> $(window).load() { $('#container').masonry({ itemSelector: '.box', columnWidth: function( containerWidth ) { return containerWidth / 5; }); }); </script> <% end %> </div> 

Answer 1

JSfiddle will be fine, try using

$(window).load(function() {

as indicated by egasimus ...

$(document).ready(function()

will not work, but the bit (function () is the one I will try first. You can "script" with gutterWidth (masonry).

UPDATE:

I forked the jsfiddle that you did, cleared part of the code (a lot of redundant javascript, etc.) and made it work. I used suggestions when laying, etc., but should make sense. Check the script for the working version: http://jsfiddle.net/8KHAh/11/

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

Make sure you use the same CSS or adjust columnWidth to adjust the fill, etc.

Answer 2

I only have a first look at jQuery Masonry, and what does it look like, maybe the plugin did not start at all? This usually happens to me when I have a syntax error in my code. Your JS looks a bit sketchy, and, hmm ... gotcha! Use this:

 $(function() { $('#container').masonry({ itemSelector: '.box', columnWidth: function( containerWidth ) { return containerWidth / 5; } }); }); 

It worked.

That's why the right indentation is important - if you had it, the problem (and the solution) would be almost immediately obvious to you. First you called:

 $(window).load() { /* your code goes here */ } 

These are two completely separate statements, almost the same as:

 $(window).load(); /* your code goes here */ 

You need to pass an anonymous function as the parameter .load() , for example:

 $(window).load ( function() { /* your code goes here */ } ) 

In addition, you had a semicolon in the settings object after defining the columnWidth function - just as if you typed

 { name1: 'value1', name2: 'value2'; // <-- SYNTAX ERROR name3: 'value3', // it okay to leave a trailing comma, though } 

It always attracts me too, but it’s much easier to see with the right margin.

Conclusion: teach yourself good indentation. Also, use the JS console to check for syntax errors; this in itself helps to tremendously understand what is wrong.

Answer 3

I am not familiar with masonry, but I show that you have 8px margin and 6px padding. I would start by trying to reduce them, perhaps two or three pixels. If this did not give me anything, I would add a border to this class and find out what exactly it affected