这个问题可能由于AJAX异步加载导致,因为页面还没有完全加载,就会导致图片位置计算错误。解决方法是等待所有元素加载完成后再初始化masonry布局。具体代码示例如下:
$(document).ready(function() { // 初始化masonry var $grid = $('.grid').masonry({ itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true, transitionDuration: 0, });
// 监听所有图片加载,等到页面完全加载完成 $grid.imagesLoaded().progress( function() { // 重新加载masonry布局 $grid.masonry('layout'); }); });