我从这个 jQuery Masonry 实现中遗漏了什么？

Question

我已经在堆栈上筛选了过多的 Masonry 帖子，并查看了其他 tumblr 博客的来源，但我无法识别我缺少什么。希望你们中的一个可以提供帮助。

相关网站可在此处进行视觉参考（注意：1 或 2 张时尚泳装照片 - 平淡无奇，但对某些人来说可能是 NSFW）。

如您所见，图像仍未正确垂直堆叠。我哪里出错了？

CSS

#wrapper {
    width: 960px;
    margin: 0 auto;
    background: #000;
    height: 400px;

}

#wrapper .posts {
    background: #ff9900;
    width: 950px;
    position:relative;
    height:100%;
}

#wrapper .entry {
    width: 300px;
    float: left;
}

砌体脚本

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script>

<script type="text/javascript">

var $posts = $('.posts');

$posts.imagesLoaded( function(){
  $posts.masonry({
    itemSelector : '.entry',
    columnWidth: 300

  });
});

</script>

Answer 1

您在此处提供的 Masonry 脚本似乎没问题（您提供的链接中的脚本有问题）。试着把它移到文档的底部，就在“body”的结束标记之前

...</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/ jquery.min.js"></script>
<script src="http://static.tumblr.com/yflpwuf/SSOm2d3y2/jquery.masonry.min.js"></script>

<script type="text/javascript">

var $posts = $('.posts');

$posts.imagesLoaded( function(){
$posts.masonry({
itemSelector : '.entry',
columnWidth: 300

 });
});

</script>

</body>
</html>

Answer 2

因为未定义函数，所以出现imagesLoaded 错误。您的 jquery.masonry.min.js 看起来缺少imagesLoaded plugin。获取this minified masonry source 的副本，而不是似乎已加载图像并查看docs