Question

我正在使用它调用并激活jQuery Masonry。

<script>    
  jQuery("#content").load("recent.html", function(){
    $('#masonryContainer').masonry({  
      // options
      itemSelector : '.item',
      columnWidth : 10,
      isAnimated: !Modernizr.csstransitions,
      easing: 'linear' 
    });
  });
</script>

问题是当页面被加载时所有图像（它们在recent.html中的div中）都堆叠在一起。在砌体激活并动画/排列图像之前，我必须首先调整浏览器窗口的大小。我希望它能立即进入。

Answer 1

我认为你错过了一个准备好了：

<script>  
  $(window).ready(function() {
  jQuery("#content").load("recent.html", function(){
    $('#masonryContainer').masonry({  
      // options
      itemSelector : '.item',
      columnWidth : 10,
      isAnimated: !Modernizr.csstransitions,
      easing: 'linear' 
    });
  });
});
</script>

Answer 2

其他JS库可能会导致页面加载时布局出现问题。例如，jQuery Mobile与jQuery Masonry不能很好地兼容，并会产生上述问题。如果是这种情况，请删除其他JS库，直到找到罪魁祸首。

jQuery砌体图像堆叠在上面

2 个答案: