CODEWITHSUNDEEP
jquerycssjquery-masonry
papacostas
papacostas

Reputation: 858

Jquery Masonry height issue

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.

Upvotes: 12

Views: 45198

Answers (2)

Romain Schneider
Romain Schneider

Reputation: 123

For a better compatibility with Google Chrome for example, change

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

to

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

Upvotes: 10

Marco Johannesen
Marco Johannesen

Reputation: 13134

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');

Upvotes: 37

Related Questions