如何在Masonry.js中附加带ajax的项目？

Question

以下是我的代码（javascript + html）。

当我使用jinja2时，它正在工作！

我更改了数据加载方法。 jinja2 - ＆gt; ajax !! （我在masorny.js中添加了ajax数据。）

然后，它现在不起作用。

为什么会这样？

也许..我的＆＃39; masorny.js＆＃39;是修改过的代码。

因为，我提到了另一个网站。

（http://www.kristianhammerstad.com/）

<script type="text/javascript">

$(function(){

    $.ajax({
        url: "/load_first_proj",
        dataType: 'JSON',
        success: function(data) {
            var numbers = parseInt(data.numbers);
            for(var i=1; i<numbers; i++){
                setNews(data.proj[i]);
            }
        },
        error: function(request,status,error){
            alert("code:"+request.status+"\n"+"error:"+error);
        }
    });


 function setNews(data) {

    var url = data.proj_image

    var proj_tag;
    proj_tag ="<div class=\"box col "+ data.proj_type +"\">"
                + "<a href=\"/detail_proj/" + data.id + "\">"
                + "<img src=\"" + url + "\"/>"
                + "<span class=\"over\">" + data.proj_title 
                + "<br>" + data.proj_year + "</span></a>"
                + "</div>"

    $('.wall').append(proj_tag);
}


var
    speed = 700, // office speed
    $wall = $('#content').find('.wall'),

    masonryOptions = { // initial masonry options
        columnWidth: 110,
        itemSelector: '.box:not(.invis)',
        animate: true,
        officeOptions: {
            duration: speed,
            queue: true
        }
    };

// run on window.load so we can capture any incoming hashes
$(window).load(function() {

    // run masonry on start-up to capture all the boxes we'll need
    $wall.masonry(masonryOptions);
    if (window.location.hash) {
        // get rid of the '#' from the hash
        var possibleFilterClass = window.location.hash.replace('#', '');
        switch (possibleFilterClass) {
            // if the hash matches the following words
            case 'residential':
            case 'cultural':
            case 'education':
            case 'commercial':
            case 'public':
            case 'complex':
            case 'office':
            case 'urban':
            case 'exhibition':
                // set masonry options animate to false
                masonryOptions.animate = false;
                // hide boxes that don't match the filter class
                $wall.children().not('.' + possibleFilterClass)
                    .toggleClass('invis').hide();
                // run masonry again, this time with the necessary stuff hidden
                $wall.masonry(masonryOptions);


                break;
        }
    }
});


$('#filtering-nav a').click(function() {
    var
        color = $(this).attr('class').split(' ')[0],
        filterClass = '.' + color;;

    if (filterClass == '.all') {
        // show all hidden boxes
        $wall.children('.invis')
            .toggleClass('invis').fadeIn(200);
    } else {
        // hide visible boxes 
        $wall.children().not(filterClass).not('.invis')
            .toggleClass('invis').fadeOut(400);
        // show hidden boxes
        $wall.children(filterClass + '.invis')
            .toggleClass('invis').fadeIn(200);

    }
    $wall.masonry({
        animate: true
    });
    // set hash in URL
    window.location.hash = color;
    return false;
});


$('#filtering-nav a').click(function() {
    $('#filtering-nav a').removeClass("selected");
    $(this).addClass("selected");
});

});



$(window).load(function() {

$('.box').mouseover(function() {
    $(this).children("a").children("span").removeClass("over");
    $(this).children("a").children("img").addClass("opacity");
}).mouseout(function(){
    $(this).children("a").children("span").addClass("over");
    $(this).children("a").children("img").removeClass("opacity");
});

});


</script>

<div id="content">

    <div class="projects">

        <!-- filtering menu -->
        <ul id="filtering-nav">
            <li>
                .......
            </li>
        </ul>

        <!-- masonry contents -->
        <div class="wall">
        </div>

    </div>
</div>