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.

if i run $('#media_list').masonry('reload'); in the console it resolves the issue. not sure how to make this happen every time it loads though — papacostas, Aug 31 '11 at 12:16
I dont quite understand the problem :( What is it doing wrong? And you could always extend the masonry with reload like you said :p — Marco Johannesen, Aug 31 '11 at 12:23
well I two things. 1) why does it look different when you access it straight from the url vs when you press reload. 2) whats a good jquery event to use to execute the $('#media_list').masonry('reload'); command? — papacostas, Aug 31 '11 at 12:34
I did not know about $('#TheMasonryContainer').masonry('reload'); tks — Bruno Gomes, Jan 07 '15 at 15:42

score 36 · Accepted Answer · answered Aug 31 '11 at 12:55

36

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

answered Aug 31 '11 at 12:55

Marco Johannesen

12,573
6
28
36

3

I wasn't aware of the imagesLoaded plugin -- thanks for that! More info on the plugin here: http://metafizzy.co/blog/imagesloaded-plugin/ – Ryan Burney Jul 19 '13 at 16:27
nice, but it's 'gutter', not 'gutterWidth' – schellmax Feb 25 '19 at 16:11

score 9 · Answer 2 · answered Feb 08 '14 at 22:30

9

For a better compatibility with Google Chrome for example, change

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

to

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

answered Feb 08 '14 at 22:30

Romain Schneider

113
2
7

this seems to make better sense if you have a lot of JS loading too. My layout would get wonky with it on doc.ready ... so thanks for the solution – Sal B Feb 24 '16 at 16:03
This worked for me. Needed this with the combination of imagesLoaded(). – Nate May 25 '16 at 18:46

Jquery Masonry height issue

2 Answers2