我有一个简单的砌体网格。加载时,.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,但它并没有真正复制这个问题。
答案 0 :(得分:35)
似乎你已经使用了重新加载。 也许是因为图像在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');
答案 1 :(得分:9)
为了更好地与Google Chrome兼容,例如,请更改
var $container = $('#media_list');
到
$(window).load(function(){ $('#media_list').masonry(); });