4

我已经在堆栈上筛选了过多的 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>
4

2 回答 2

3

您在此处提供的 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>
于 2012-04-13T08:49:07.640 回答
3

imagesLoaded由于未定义函数，因此出现错误。您的 jquery.masonry.min.js 看起来缺少imagesLoaded 插件。获取这个缩小的砌体源的副本，而不是似乎有 imagesLoaded 并查看文档

于 2012-04-13T09:07:05.837 回答