javascript - jQueryの石工の例がうまくいかない

Question

jQuery masonryに基づいて、次のものを取得しました。

jQuery:

$('#container').masonry({
    itemSelector : '.item',
        columnWidth: 240
});

jQuery ajax: (jquery-masonry は、ページの読み込み後に初めて機能します。ページをリロードせずに再度発生したsuccess場合、jquery-masonry は機能しません。)success

success: function( widget_shell ) 
{ 

    if( widget_shell.d[0] ) {

        $( "#container" ).empty();

        var i = 0;

        // creating the div elements
        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {

            var j = Math.floor(Math.random() * 200) + 50

            var $widget = $( "<div class='item col1' style='height:" + j + "px'></div>" ).appendTo( $( "#container" ) );
            $( "<span>" + widget_shell.d[i].widget_id + " - " + j + "</span>" ).appendTo( $widget );

        }

        // initialising the jquery masonry plugin
        $('#container').masonry({
            itemSelector : '.item',
            columnWidth: 240
        });

    }

}

HTML: (jQuery-ajax 経由で動的に作成)

<div id="container" style="position: relative; height: 0px;" class="masonry">
    <div class="item col1" style="height:154px"><span>39 - 154</span></div>
    <div class="item col1" style="height:100px"><span>52 - 100</span></div>
    <div class="item col1" style="height:229px"><span>53 - 229</span></div>
    <div class="item col1" style="height:126px"><span>55 - 126</span></div>
    <div class="item col1" style="height:245px"><span>56 - 245</span></div>
    <div class="item col1" style="height:242px"><span>57 - 242</span></div>
    <div class="item col1" style="height:146px"><span>58 - 146</span></div>
    <div class="item col1" style="height:63px"><span>59 - 63</span></div>
    <div class="item col1" style="height:118px"><span>60 - 118</span></div>
    <div class="item col1" style="height:249px"><span>61 - 249</span></div>
    <div class="item col1" style="height:136px"><span>62 - 136</span></div>
    <div class="item col1" style="height:114px"><span>63 - 114</span></div>
    <div class="item col1" style="height:152px"><span>64 - 152</span></div>
    <div class="item col1" style="height:52px"><span>65 - 52</span></div>
    <div class="item col1" style="height:95px"><span>66 - 95</span></div>
</div>

CSS:

.item {
    width: 220px;
    margin: 10px;
    float: left;
    background:white;
}

結果：

ここに画像の説明を入力

期待される：

div が水平方向と垂直方向に互いに向かい合っているという点で、このように見えるはずです。

質問：

私は何を間違っていますか？

score 2 · Accepted Answer

.masonry('reload')さらに要素を追加した後、関数を使用する必要があります。たとえば、これはうまくいくかもしれません：

success: function( widget_shell ) 
{ 

    if( widget_shell.d[0] ) {

        $( "#container" ).empty();

        var i = 0;

        // creating the div elements
        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {

            var j = Math.floor(Math.random() * 200) + 50

            var $widget = $( "<div class='item col1' style='height:" + j + "px'></div>" ).appendTo( $( "#container" ) );
            $( "<span>" + widget_shell.d[i].widget_id + " - " + j + "</span>" ).appendTo( $widget );

        }

        // reload jquery masonry plugin
        $('#container').masonry('reload')

    }

}

それ以外の場合は、jsFiddle を確認してください: http://jsfiddle.net/RNA8R/1/

score 0 · Accepted Answer

jquery.masonry.min.js正しくロードされていないと思われます。Firebug または Chrome 開発者ツールのネットワークタブを確認してください。

私のindex.htmlファイル内の正確なコードは次のとおりです（DOMでレンダリングされたものではなく、htmlファイル内の実際のコードです）：-

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script src="./masonry-master/jquery.masonry.min.js"></script>
        <script>
            $(function(){
              $('#container').masonry({
                // options
                itemSelector : '.item'
              });
            });
        </script>
        <style>
            body {
                background: #999;
            }

            .item {
                width: 220px;
                margin: 10px;
                float: left;
                background:white;
            }
        </style>
    </head>
    <body>
    <div id="container">
        <div class="item" style="height:154px"><span>39 - 154</span></div>
        <div class="item" style="height:100px"><span>52 - 100</span></div>
        <div class="item" style="height:229px"><span>53 - 229</span></div>
        <div class="item" style="height:126px"><span>55 - 126</span></div>
        <div class="item" style="height:245px"><span>56 - 245</span></div>
        <div class="item" style="height:242px"><span>57 - 242</span></div>
        <div class="item" style="height:146px"><span>58 - 146</span></div>
        <div class="item" style="height:63px"><span>59 - 63</span></div>
        <div class="item" style="height:118px"><span>60 - 118</span></div>
        <div class="item" style="height:249px"><span>61 - 249</span></div>
        <div class="item" style="height:136px"><span>62 - 136</span></div>
        <div class="item" style="height:114px"><span>63 - 114</span></div>
        <div class="item" style="height:152px"><span>64 - 152</span></div>
        <div class="item" style="height:52px"><span>65 - 52</span></div>
        <div class="item" style="height:95px"><span>66 - 95</span></div>
    </div>


    </body>
</html>

ディレクトリ構造:-

私のindex.htmlロードは、同じディレクトリレベルで右jquery.masonry.min.jsと呼ばれるディレクトリにロードされますmasonry-master

javascript - jQueryの石工の例がうまくいかない

2 に答える 2

Related

Reference