Question

我四处搜索并查看了一堆不同的逻辑，并认为我非常接近，但根本无法获得我的无限滚动脚本将我的数据附加到砌体上。我在提取数据时有一个AJAX文件，这是文件内部的主线，它在滚动时拉取数据：

        function getData() {

            // Post data to ajax.php
            $.post('ajax.php', {

                action        : 'scrollpagination',
                number        : $settings.nop,
                offset        : offset,

            }, function(data) {

                // Change loading bar content (it may have been altered)
                $this.find('#spinner').html($initmessage);

                // If there is no data returned, there are no more posts to be shown. Show error
                if(data == "") { 
                    $this.find('#spinner').hide();  
                }
                else {



                    // Offset increases
                    offset = offset+$settings.nop; 

                    // Append the data to the content div
                    $this.find('.content').append(data);


                    // No longer busy!  
                    busy = false;
                }   

            });

        }

我尝试对“$ this.find（'。content'）。append（data）;”这一行进行编辑。“因为这只是将数据放入内容div中，该div位于我的主索引文件中的砌体函数内。

我尝试过像

这样的事情

$ this.find（'。content'）。append（data）.masonry（'reload'）;

但是根本无法让它正常工作并让它附加数据。

其余的代码正常工作，滚动工作正常并且提取数据，只是不会附加到砌体上。

任何提示，我觉得我错过了很小的东西。

提前致谢！

Answer 1

我遇到了与Masonry（新版本3）相同的问题。关键是.filter（）用于AJAX / GET / POST返回的内容。 There is a bug with Masonry that you can read here，解决方法是使用.filter（）。

    // Make jQuery object from HTML string
    var $moreBlocks = jQuery(data).filter('div.block');

    // Append new blocks to container
    jQuery('#container').append( $moreBlocks );

    // Have Masonry position new blocks
    jQuery('#container').masonry( 'appended', $moreBlocks );

我做了一个小小的演示来帮忙： http://labs.funkhausdesign.com/examples/masonry/appended.html

Answer 2

$moreBlocks.imagesLoaded(function(){

    $moreBlocks.animate({ opacity: 1 });

    jQuery('#container').masonry( 'appended', $moreBlocks );

});

看起来这样做了。谢谢你的帮助德鲁，非常感谢！

使用无限滚动将AJAX项目附加到砌体上

2 个答案: