Jquery Masonry高度问题

Question

我有一个简单的砖石网格。当它加载时，.content 类是可见的。当您重新加载时，项目会相互流动。

这只发生在 Chrome 和 Safari 中，在 Firefox 中看起来不错。

这是网格中的 css：

#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;}

这就是砌体的调用方式：

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

我可以使用 min-height 和 margin 来解决它，但这不是动态的，也不会看起来很干净。

这是 a JS Fiddle 但它并没有真正复制问题。

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(); });