Jquery Masonry height issue

Question

I have a simple masonry grid. When it loads the .content class is visible. When you reload the items flow in to each other.

This only happen in Chrome and Safari, in Firefox it looks good.

Here is the css from the grid:

#media_list {} 
#media_list .media_item  {  height: auto; width: 270px; display: inline-block; background: #f4f4f4; border: 1px solid #d9d7d5; float: left; padding: 10px 0px 10px 0px; font: 11px Helvetica Neue; }
#media_list .media_item .date { color: white;  background: #2f343a; padding: 10px 5px; width: 260px; float: left; margin: 0px 0px 15px 0px;}
#media_list .media_item .content { padding: 15px; float: left; display: inline-block; margin-bottom: 20px; }
#media_list .media_item img { border: 1px solid #dedddd;  margin: 0px 0px 10px 10px; width: 248px;}

This is how masonry is called:

$('#media_list').masonry({  // options
                            itemSelector : '.media_item',
                            columnWidth : 300
                         });

I can work around it with min-heights and margins but that's not dynamic and doesn't look very clean.

Here is a JS Fiddle but it doesnt really replicate the issue.

Answer 1

Seems you already use the reload. Maybe its because the images reload on URL refresh and not on reload.

Try:

var $container = $('#media_list');
$container.imagesLoaded(function(){
  $container.masonry({
        itemSelector : '.media_item',
        columnWidth : 300,
        gutterWidth: 20
  });
});

otherwise

$('#media_list').masonry({
    // options
    itemSelector : '.media_item',
    columnWidth : 300,
    gutterWidth: 20
}).masonry('reload');

Answer 2

For a better compatibility with Google Chrome for example, change

var $container = $('#media_list');

to

$(window).load(function(){ $('#media_list').masonry(); });