Question

我是javascript / jquery的新手，并且承认我目前还不确定这一切是如何运作的，我已经做了很多谷歌搜索来实现这一目标！所以我有一个网站使用masonry.js以pinterest类型的方式显示项目。现在第一页加载正常并按预期布局。当用户滚动到页面底部时，我的新内容会添加到屏幕上的正确位置但旧内容已消失！新内容添加在正确的位置，但前面的所有内容都是空白的！这几乎可以工作，我只是不明白为什么滚动功能会附加内容但删除原始内容！

加载初始内容的代码是：

    <script type="text/javascript">
$(document).ready(function() {
    var $grid = $('.grid').masonry({
    // set itemSelector so .grid-sizer is not used in layout
    itemSelector: '.grid-item',
    // use element for option
    columnWidth: '.grid-sizer',
    gutter: 10
    })
});

    var track_load = 0; //total loaded record group(s)
    var loading  = false; //to prevents multiple ajax loads
    var total_groups = <?php echo $total_groups; ?>; //total record group(s)
    var leagueid = <?php echo "1";?>;
    var content = $('.grid').load("league_news1.php", {'group_no':track_load,'leagueid':leagueid}, function() {track_load++;
    $(".grid").imagesLoaded(function() {
    $(".grid").append(content).masonry("appended", content);
});


});
</script>

然后，这是我用来在用户滚动时添加更多内容的内容：

    <script type='text/javascript'>
        $(window).scroll(function() { //detect page scroll

        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 60) {

            if(track_load <= total_groups && loading==false) //theres more data to load
            {   


                loading = true; //prevent further ajax loading

                $('.animation_image').show(); //show loading image
                    //load data from the server using a HTTP POST request


                    var new_content = $('.grid').load("league_news1.php", {'group_no':track_load,'leagueid':leagueid}, function() {
                    $(".grid").imagesLoaded(function() {
                    $(".grid").append(new_content).masonry("appended",new_content);



                    //hide loading image
                    $('.animation_image').hide(); //hide loading image once data is received

                    track_load++; //loaded group increment
                    loading = false; 

                }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                    alert(thrownError); //alert with HTTP error
                    $('.animation_image').hide(); //hide loading image
                    loading = false;

                });

            });
        }
    }
});
</script>

Answer 1

在与插件的开发人员交谈之后（虽然这是我的jquery有问题，而不是他出色的插件），答案是将内容包装在jquery对象中，如下所示：

$.get("league_news.php", {'group_no':track_load,'leagueid':leagueid}, function(data) {
        track_load++;
        var $content=$(data); 
        $content.imagesLoaded(function() {
        $(".grid").append($content).masonry("appended", $content);
    });


    });

无限滚动的masonry.js - 内容正在消失

1 个答案: