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

你在这里提供的砌体脚本似乎没问题（你提供的链接中的那个是错误的）。尝试将它移动到文档的底部，就在“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

我在这个jQuery Masonry实现中缺少什么？

2 个答案: