jquery - 我在这个 jQuery Masonry 实现中缺少什么?

标签 jquery jquery-plugins tumblr jquery-masonry

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

相关文章:

javascript - 如何将 css 仅应用于文本内部/或任何 <p><p> 元素中的数字?

jquery - 筹款温度计方法

php - 使用 tumblr API 获取前 5 篇帖子

objective-c - 安装 pod 文件时找不到“JXHTTP (= 1.0.0)”规范

jquery - 调用 fullcalendar 方法时出现问题

javascript - 脚本只适用于十分之一的 div

javascript - 如何使用 jQuery.data 递归扩展数据?

javascript - JQuery:尝试在单击按钮时将数字附加到文本区域

javascript - 切换 jquery 容器内的链接不起作用

javascript - 是否有 Jquery 或 Dojo 或纯 JavaScript 方式将 div 转换为图像?