使用JQuery将隐藏div中的项目拉到另一个＆amp;无限滚动

Question

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

然后将这些照片（100x100缩略图）从该目录中拉出并放在一个<DIV ID=Content>中，显示该目录中的所有照片。

编码员：

<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张图像。

从我的研究中看来，我必须隐藏<DIV ID=Content>，然后一次将30张图片拉到新的<DIV ID=load30>。我希望当用户从页面底部到达200像素时再加载30个并继续此操作直到没有其他图像从隐藏的<DIV ID=Content>

中拉出来

以下是我试图从<DIV ID=Content> to <Div ID=Load30>中提取图片的代码。我正在使用它，因为load30 div没有被填充。

我的错误在哪里？

我似乎无法让它正常工作。

<script>

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

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

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

    );

});
</script>