jQuery Jquery砌体高度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7256695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Masonry height issue
提问by papacostas
I have a simple masonry grid. When it loads the .contentclass is visible. When you reloadthe items flow in to each other.
我有一个简单的砖石网格。当它加载.content类是可见的。当您重新加载项目时，它们会相互流入。
This only happen in Chrome and Safari, in Firefox it looks good.
这只发生在 Chrome 和 Safari 中，在 Firefox 中看起来不错。
Here is the css from the grid:
这是网格中的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;}
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.
我可以用min-heights 和margins解决它，但这不是动态的，看起来不太干净。
Here is a JS Fiddlebut it doesnt really replicate the issue.
这是一个 JS Fiddle，但它并没有真正复制这个问题。
回答by Marco Johannesen
Seems you already use the reload. Maybe its because the images reload on URL refresh and not on reload.
似乎您已经使用了重新加载。也许是因为图像在 URL 刷新时重新加载，而不是在重新加载时重新加载。
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');
回答by Romain Schneider
For a better compatibility with Google Chrome for example, change
例如，为了更好地兼容 Google Chrome，请更改
var $container = $('#media_list');
to
到
$(window).load(function(){ $('#media_list').masonry(); });
