jQuery砌体不工作。

我有它的工作，但由于某种原因，它刚刚停止工作，我不知道我已经做了什么。框divs是浮动左，我只是不知道我哪里出了问题。jQuery砌体不工作。

jQuery的

var $container = $('.work');    
$container.imagesLoaded(function(){     
    $container.masonry({ 
     itemSelector: '.box', 
     isAnimated: true, 
     columnWidth: 250     
    }); 
});

HTML

<div id="part-one" class="work"> 
    <div class="box col2"><img src="_assets/images/one.jpg" alt="" /></a></div> 
    <div class="box col2"><img src="_assets/images/two.jpg" alt="" /></a></div> 
    <div class="box col2"><img src="_assets/images/three.jpg" alt="" /></a></div> 
    <div class="box col2"><img src="_assets/images/four.jpg" alt="" /></a></div> 
    <div class="box col2"><img src="_assets/images/five.jpg" alt="" /></a></div> 
</div>

CSS

.work { 
    margin-left:98px; 
    top:0; 
    max-width:1600px; 
    padding-bottom:100px; 
    position:absolute; 
}

来源

2012-08-23 green_arrow

请问您能提供一个完全不工作的例子吗？ – Asken

只是一个猜测，但是当您删除imagesLoaded（）并在文档加载时执行masonry（）部分时，它会工作吗？ –

不，它确实拉了脚本，我检查了萤火虫，我完全丧失了！我会尽力得到一个jsfiddle –

删除您的columnWidth属性，砌体将使用第一个元素的宽度。（Docs）。

看看这个JSFiddle。 http://jsfiddle.net/s8PhS/14/

如果您在JSFiddle中调整HTML容器大小，它也将动态调整大小。
我还为演示目的添加了一些额外的<div>元素，并且为Odd Five element添加了不同的高度，并且您可以看到砌体插件完美地启动并定位元素。

所以基本上，删除属性columnWidth: 250，让砌体动态地捡起它。

在JSFiddle，这似乎解决了你的问题。

只是一个提示：我最近使用这个相同的jquery.masonry插件，但也想把我的元素进行排序，我发现这个惊人的插件叫做 Isotope这是惊人的，更加个性化。

Check out the Demo on the Homepage!

来源

2012-08-23 11:11:00 Anil

这似乎是与砖石列宽属性和可用的空间来显示DIV。试图在你的jsfiddle上玩弄思考。祝你好运。

来源

2012-08-23 10:40:57 ThierryB

jQuery砌体不工作。

回答

相关问题