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

<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 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.