Javascript 使用JQuery将项目从隐藏div拉到另一个&无限滚动

我的网站上有一个页面，允许用户将照片上传到我服务器上的一个目录

然后从该目录中提取这些照片100x100缩略图，并将其放置在a中，a将显示该目录中的所有照片

编码员：

<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
    $.ajax({
        url: "user-uploads-thumbnails",
        success: function(data){
            var imageNames = [];
            $(data).find("a:contains(.jpg)").each(function(){
                // store each image name into array
                imageNames.push($(this).attr("href"));
               });

            var sortedImageNames = imageNames.sort();

            for(var i = sortedImageNames.length; i-- > 0;) {
                    var linkImage = 'user-uploads/' + sortedImageNames[i];
                    var thumbnailImage = 'user-uploads-thumbnails/' + sortedImageNames[i];
                    var item = '<div class="item"> <li> <a class="fancybox" href="' 
                        + linkImage 
                        + '" data-fancybox-group="gallery"><img class=dropshadow src="' 
                        + thumbnailImage 
                        + '"></a></li></div>';
                    $(item).appendTo('#content');
                }
            $('.fancybox').fancybox();
            }
        });
    });
</script>

然而，照片墙变得太大了，我需要实现一个无限滚动功能，一次拉30张图片

根据我的研究，看起来我必须隐藏图像，然后一次将30张图像拉到一个新的位置。我想它然后加载另一个30一旦用户达到200像素从页面底部，并继续这一点，直到没有更多的图像拉从隐藏

下面是我用来将图像从中拉到中的代码。我正在使用它，因为load30 div没有被填充

我的错在哪里

我似乎无法使它正常工作

<script>

    $(document).ready(function() {
    $(document).endlessScroll( 

    {
        bottomPixels:200,
        callback: function (p) 
            {

            var load30images = $('#content li:lt(30)');
            $('#load30').append(load30images);      
            }   
    }

    );

});
</script>