jquery - jQuery Masonry 图像堆叠在顶部

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 库，直到找到罪魁祸首。