我已经筛选了堆栈上过多的 Masonry 帖子,并查看了其他 tumblr 博客的来源,但无法认识到我错过了什么。希望你们中的一位能够提供帮助。
该网站可在此处获取,以供视觉引用(注意:1 或 2 张时尚泳装照片 - 很温和,但对某些人来说可能不适合上类族)。
如您所见,图像仍然无法正确垂直堆叠。我哪里出错了?
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>
最佳答案
您在此处提供的 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>
关于jquery - 我在这个 jQuery Masonry 实现中缺少什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10118822/