jQuery-我在做什么错？
[英]JQuery - What Am I Doing Wrong?
问题描述
I'm using Jquery Wookmark as an alternative to Masonry.js but I can't get it to work at all. 
我正在使用Jquery Wookmark替代Masonry.js，但我根本无法使用它。 What am I doing wrong here? 我在这里做错了什么？
<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>
This is how it appears to tell you to do it on github but I can't get them to block up beneath each other without a huge gap. 看起来这是告诉您在github上执行此操作的方式，但是我不能让他们在彼此之间保持巨大的差距。 What do I need to change? 我需要更改什么？
4 个解决方案
解决方案1
1 2013-10-25 11:22:10
first include jQuery file 首先包含jQuery文件
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
then add 然后加
<script type="text/javascript" src="scripts/jquery.wookmark.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#postsHolder div').wookmark();
});
解决方案2
0 2013-10-25 11:24:02
Include Jquery and add css inside the head tag 包括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>
解决方案3
0 2013-10-25 11:24:04
As jQuery is already included (as mentioned in comments), all you need to do is wrap your custom script in a $( document ).ready() function : 由于已经包含jQuery（如注释中所述），因此您所需要做的就是将自定义脚本包装在$( document ).ready()函数中 ：
<script type="text/javascript">
$(document).ready(function() {
$('#postsHolder div').wookmark();
});
</script>
A page can't be manipulated safely until the document is "ready."
$( document ).ready()will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.$( document ).ready()内包含的代码仅在页面Document Object Model（DOM）准备好执行JavaScript代码后才能运行。
Your CSS declaration at the top will do nothing if it's just plain text. 如果您的CSS声明只是纯文本，则不会执行任何操作。 CSS must be placed within the document's <head> and must be wrapped within the style element: CSS必须放置在文档的<head>并且必须包装在style元素中：
<head>
<style type="text/css">
.singlePost{
float: left;
width: 210px;
}
</style>
</head>
解决方案4
0 2013-10-25 11:31:31
Your script is in head. 您的脚本很重要。 And when it is executed maybe postsHolder div not exists. 并且当它执行时，postHolder div可能不存在。 Replace it with function 替换为功能
<script>
$(function(){
$('#postsHolder div').wookmark();
}
</script>
EDIT: precise selector and add container. 编辑：精确选择器并添加容器。 This work for me, and without float:left . 这对我有用，并且没有float:left 。 See container property 查看容器属性
$(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
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.