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

似乎您已经使用重新加载。可能是因为图像在 URL 刷新时重新加载，而不是在重新加载时。

尝试：

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

否则

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

Answer 2

例如，为了更好地与 Google Chrome 兼容，请更改

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

至

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