我有一个简单的砖石网格.当它加载.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
});
我可以用最小的高度和边距来处理它,但这并不动态,看起来不是很干净.
这是a JS Fiddle,但它并没有真正复制这个问题.
解决方法
@H_301_19@ 似乎你已经使用了重新加载.也许它是因为图像重新加载在URL刷新而不是重新加载.
尝试：
var $container = $('#media_list');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.media_item',columnWidth : 300,gutterWidth: 20
});
});
除此以外
$('#media_list').masonry({
// options
itemSelector : '.media_item',gutterWidth: 20
}).masonry('reload');
