0

Masonry.js の代わりに Jquery Wookmark を使用していますが、まったく動作しません。ここで何が間違っていますか？

<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

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 は、この準備完了状態を検出します。内部$( document ).ready()に含まれるコードは、ページのドキュメント オブジェクト モデル (DOM) で JavaScript コードを実行する準備が整った場合にのみ実行されます。

上部の CSS 宣言は、プレーン テキストの場合は何もしません。CSS はドキュメント内に配置し、要素<head>内でラップする必要があります。style

<head>
    <style type="text/css">
        .singlePost{
            float: left;
            width: 210px;
        }
    </style>
</head>
于 2013-10-25T11:24:04.803 に答える