3

Masonry がダイナミック コンテンツで機能しません。理由がわかりません。これは私の側のバグではないと思います。少なくとも、コードを数時間調べましたが、機能していないものは何も見つかりません。

//reads listbox.php and cycles through the array calling createbox
function listboxs() {
    $.ajax({
        url: '_php/listbox.php',
        success: function (output) {

            var jsonArray = $.parseJSON(output);

            $.each(jsonArray, function (i, box) {
                createbox(box.id, box.name, box.link, box.description, box.tags);
            });
        }
    });
}

//create the code for 1 box
function createbox(id, name, link, description, tags) {

    var boxHtml = "",
        tagsHtml = "",
        descriptionHtml = "";

    boxHtml = '' + '<div class="box" id="' + id + '">' + '<div class="boxinfo">' + '<label class="boxname"><a href="' + link + '" class="boxlink" target="_blank">' + name + '</a></label>';

    $.each(tags, function (i, tag) {
        tagsHtml += '<label class="boxtag">' + ((!tag.name) ? tags[i] : tag.name) + '</label>';
    });

    //if(description.trim().length > 0){
    descriptionHtml = '<textarea class="boxdescription" readonly rows="1">' + description + '</textarea>';
    //}

    boxHtml += tagsHtml + '</div>' + descriptionHtml + '</div>';

    $content.html($content.html() + boxHtml);
}

以下は単純化された HTML です。

<!DOCTYPE html>
<html>

    <head>
        <link rel="stylesheet" type="text/css" href="_css/index.css" />
        <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet'
        type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet'
        type='text/css'>
        <script src="_resources/jquery-2.0.3.min.js" type="text/javascript" language="javascript"></script>
        <script src="_resources/masonry.pkgd.min.js"></script>
        <script type="text/javascript" language="javascript">
            $('#content').masonry();
        </script>
    </head>

    <body>
        <div id="content" class="js-masonry"></div>
    </body>

</html>

コンテンツで石積みを呼び出すインライン JavaScript が必要ないことはわかっていますが、これは私の多くのテストの 1 つです...

以下は CSS の一部です。

#content{
padding: 15px;
min-height: 400px;
}

/*
################################
box
*/

.box{
border: 1px solid black;
float: left;
padding: 5px;
background: #F0F0F0;
margin-left: 5px;
margin-bottom: 5px;
}

.boxinfo{
border-bottom: 1px solid black;
}

.boxname{
font-weight: bold;
}

.boxdescription{
border: none;
outline: none;
background: white;
overflow: hidden;
}

.boxtag{
margin-left: 5px;
}

#boxdecoy{
height: 45px;
}

.boxname, .boxtag, .boxdescription{
font-family: 'Rosario', sans-serif;
font-size: 12px;
}

.boxlink{
text-decoration: none;
color: black;
}

.boxlink:hover{
text-decoration: underline;
}

コンテンツで手でボックスを作成することをテストしたので（これはhtmlに書き込むことを意味します）、石積みがうまく機能すれば、私は本当にすべてに夢中になります。そこに表示される関数を使用してそれらを作成すると、機能しません...すべての変数を宣言した後、JavaScriptファイルの先頭でリストボックスを呼び出します...

私がはっきりしていて、あなたが私を助けてくれることを願っています.

4

2 に答える 2

5

メソッドを使用する必要がありますappended。ドキュメントから：

新しく追加された項目要素を追加してレイアウトします。

このjsfiddleを見てください

コードを次のように変更してみてください

boxHtml += tagsHtml +
        '</div>' +
    descriptionHtml +
'</div>';

var $boxHtml = $(boxHtml);

$content.append($boxHtml).masonry('appended', $boxHtml);
于 2013-08-28T08:18:53.640 に答える
1

グリンの答えに追加：

また、 #container に data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }' を適用する必要があります。

<div id="content" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'></div>

そのようです。コメントの返信に役立つ場合があります。コメントとして答える担当者がいません。

于 2013-08-28T10:03:48.193 に答える