jQuery砌体图像堆积在顶部

我用它来调用和激活jQuery砌体。jQuery砌体图像堆积在顶部

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

问题是，当页面加载的所有图像（它们在div的在recent.html中）堆叠在彼此的顶部。在砌体激活和动画/排列图像之前，我必须先调整浏览器窗口的大小。我想它要做到这一点就在未来

来源

2012-08-31 Kleiv

您是否在HTML中指定了图片的高度和宽度？这也是砌体不马上布局的典型原因，因为它不能保留加载图像所需的空间，因此无法找到正确的布局。 – Systembolaget

我已经为类“item”指定了宽度。如果我指定高度砌体将无法正常工作，因为图像之间的空间将基于我指定的高度，而不是根据砌体的安排。 – Kleiv

砌体需要元素的高度和宽度来正确计算布局。所以，当你使用Ajax加载你的图片或内容（是你加载它们的东西？）时，你可能会遇到与其他人一样的问题http://stackoverflow.com/q/12093378/963514但是也许Liam的回答是正确的;很难说没有jsfiddle或者你的在线沙箱。 – Systembolaget

我认为你错过了准备：

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

来源

2012-08-31 09:33:08 Liam

谢谢你的回答。 – Grigio

-1

其它JS库可能会导致问题与网页加载的布局。例如jQuery Mobile与jQuery Masonry搭配不好，会产生上述问题。如果是这种情况，请删除其他JS库，直到找到罪魁祸首。

来源

2013-08-11 21:19:07

jQuery砌体图像堆积在顶部

回答

相关问题