jQuery Masonry 图像堆叠在顶部答案

【问题标题】：jQuery Masonry images stacked on topjQuery Masonry 图像堆叠在顶部
【发布时间】：2013-08-12 05:19:07
【问题描述】：

我正在使用它来调用和激活 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 中）都堆叠在一起。在砌体激活和动画/排列图像之前，我必须先调整浏览器窗口的大小。我希望它马上进来。

【问题讨论】：

您是否在 HTML 中指定了图像的高度和宽度？这也是 Masonry 没有立即布局的一个典型原因，因为它无法为加载图像保留必要的空间，因此无法制定正确的布局。
我已经为“item”类指定了宽度。如果我指定高度，砌体将无法正常工作，因为图像之间的空间将基于我指定的高度，而不是根据砌体的安排。
砌体需要元素的高度和宽度才能正确计算出布局。因此，当您使用 Ajax 加载图像或内容时（这是您加载它们的内容吗？），您可能会遇到与其他人相同的问题 stackoverflow.com/q/12093378/963514 但也许 Liam 的答案是正确的；如果没有 jsfiddle 或您的在线沙箱，很难分辨。
你试过触发布局吗？ $('#masonryContainer').masonry('layout');加载窗口后调用它。

标签： jquery jquery-masonry

【解决方案1】：

我认为你缺少一个准备好的：

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

【讨论】：

【解决方案2】：

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

【讨论】：