我正在使用Jquery Wookmark作为Masonry.js的替代品,但我根本无法使用它。我在这里做错了什么?
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<?php include("include/head.php"); ?> // CONTAINS JQUERY 1.9.1
<link rel="stylesheet" type="text/css" href="css/posts.css" />
<link rel="stylesheet" type="text/css" href="css/searches.css" />
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
</head>
<div id="postsHolder">
<div class="post singlePost">
<div class="postInner">
<div class="postTop">
<div class="postTopRow"><strong>Title</strong></div>
</div>
<div class="postContentHolder postNoteText">
Post Information
</div>
<div class="postOptions"></div>
</div>
</div>
x20 (or however many php script specifies)
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
这就是告诉你如何在github上做这件事,但我不能让他们在没有巨大差距的情况下阻挡彼此。我需要改变什么?
答案 0 :(得分:1)
首先包含jQuery文件
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
然后添加
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#postsHolder div').wookmark();
});
答案 1 :(得分:0)
包含Jquery并在head标签中添加css
<html>
<style>
.singlePost{
float: left;
width: 210px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
</html>
答案 2 :(得分:0)
由于已经包含了jQuery(如评论中所述),您需要做的就是将自定义脚本包装在$( document ).ready()
function中:
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
在文档“准备就绪”之前,无法安全地操作页面。 jQuery为您检测这种准备状态。
$( document ).ready()
中包含的代码只有在页面文档对象模型(DOM)准备好执行JavaScript代码后才会运行。
如果它只是纯文本,那么顶部的CSS声明将不会执行任何操作。 CSS必须放在文档<head>
中,并且必须包含在style
元素中:
<head>
<style type="text/css">
.singlePost{
float: left;
width: 210px;
}
</style>
</head>
答案 3 :(得分:0)
你的脚本是正确的。并且当它被执行时可能postsHolder div不存在。将其替换为功能
<script>
$(function(){
$('#postsHolder div').wookmark();
}
</script>
编辑:精确选择器并添加容器。这项工作适用于我,没有float:left
。
请参阅容器属性
$(function() {
// Call the layout function.
$('#postsHolder .post').wookmark({
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('body'), // the width of this element is used to calculate the number of columns, defaults to "window". For example $('myContentGrid'). Container should also have the CSS property "position: relative".
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
});
});