0

我正在使用 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 上执行此操作的方式，但我无法让它们在没有巨大间隙的情况下相互阻挡。我需要改变什么？

4

4 回答 4

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();
      });

于 2013-10-25T11:22:10.270 回答
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>
于 2013-10-25T11:24:02.770 回答
0

由于已经包含 jQuery（如评论中所述），您需要做的就是将自定义脚本包装在一个$( document ).ready()函数中：

<script type="text/javascript">
    $(document).ready(function() {
        $('#postsHolder div').wookmark();
    });
</script>

在文档“准备好”之前，无法安全地操作页面。jQuery 会为您检测到这种准备状态。仅当页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时，其中包含的代码$( document ).ready()才会运行。

如果只是纯文本，您在顶部的 CSS 声明将无济于事。CSS 必须放在文档中<head>，并且必须包含在style元素中：

<head>
    <style type="text/css">
        .singlePost{
            float: left;
            width: 210px;
        }
    </style>
</head>
于 2013-10-25T11:24:04.803 回答
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
      });
    });
于 2013-10-25T11:31:31.257 回答