Question

我编写了一个基于jquery的应用程序，它显示来自flickr的图像。一个工作示例发布在jsfiddle DEMO

中

我遇到的唯一问题是无限滚动不起作用，即当我开始滚动到底部时，它没有得到接下来的5个图像。

如何让无限卷轴工作，我怎么知道它已经到达所有图像的末尾？

我的代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Endless Scroll Flicker feed test 2</title>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script language="javascript">

function myAJAXfun(page) {
var searchTerm = $("#search").val(); // get the user-entered search term
//alert(searchTerm);
var URL2='http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e58bbdc1db64c8f63ff7f7460104aa9d&'; 
//tags=flower&text=&per_page=5&page=10&format=json

                    var perpage=5;
                    currentpage=page;
                    console.log("currentpage in func "+currentpage);
                    var tags="&tags="+ searchTerm;
                    var tagmode="&tagmode=any";
                    var jsonFormat = "&format=json";                    
                    var ajaxURL= URL2+"per_page="+perpage+"&page="+currentpage+tags+tagmode+jsonFormat;
                    //var ajaxURL= URL+"?"+tags+tagmode+jsonFormat;

                 $.ajax({
                  url:ajaxURL,
                  dataType:"jsonp",
                  jsonp:"jsoncallback",
                  success: function(data) {
                        if(data.stat!="fail") {
                             console.log(data); 
                             $("#photos").empty();
                            $.each(data.photos.photo, function(i,photo) {
                              var photoHTML="";
                              photoHTML+= "<img src='";
                              photoHTML+="http://farm"+photo.farm+".static.flickr.com/"+photo.server+"/"+photo.id+"_"+photo.secret+"_q.jpg'"; 
                              photoHTML+=" title='"+photo.title+"'" ;
                              photoHTML+="><br>";
                              console.log(photoHTML);
                              $("#photos").append(photoHTML).fadeIn(200);
                            });

                        }

                    }
                 });

}


$(document).ready(function() {
 $("#submit").click(function (event) {
    myAJAXfun();

 });

  $("#photos").scroll(function(){

            var page=1;
            //var scrolloffset=20;
             //  if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) {
             // if($("#scrollbox").scrollTop() == $(document).height() - $("#scrollbox").height()-20) {
                // check if we're at the bottom of the scrollcontainer
               //  if ($(this)[0].scrollHeight - $(this).scrollTop() == $(this).outerHeight()) 
               if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10)
                 {  

                    $("#submit").click();
                    myAJAXfun(page);
                      page++;
                    //  scrollalert()

                  console.log("page "+page);
               }

    });

});





</script>
<style type="text/css" >
/*
    #container{ width:400px; margin:0px auto; padding:40px 0; }
    #scrollbox{ width:400px; height:300px;  overflow:auto; overflow-x:hidden; border:1px solid #f2f2f2; margin-top:150px;}
    #container > p{ background:#eee; color:#666; font-family:Arial, sans-serif; font-size:0.75em; padding:5px; margin:0; text-align:right;}*/
    #searchBar {align:center; position:fixed; height:65px; background-color:#777; border:1px solid red; width:100%;top:0;} 
    #photos {position: absolute; left: 186px; top: 105px; width: 376px; height:550px; overflow:auto; } 
</style>
</head>

<body>
<div align="center" id="searchBar">
<div>Enter Search Term</div>
<form><input type="text" id=search />
<input type="button" id=submit value="Search" /><input type="reset" value="Clear" /></form>
</div> 

<div id="photos"></div> 



</body>
</html>

Answer 1

你可以做的是在你的“照片”div下面放一个叫做“页脚”的东西。然后，您可以将jquery函数$(window).scroll()函数与例如footerInView()函数结合使用。如果在滚动时页脚处于视图中，则应再次调用ajax函数以获取新图片。

例如......

var loading = false;

function footerInView()
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $("#footer").offset().top;
    var elemBottom = elemTop + $("#footer").height();

    return (elemBottom >= docViewTop);
}

$(window).scroll(function() {
    if(footerInView() && !loading)
    {
        loading = true;
        //call your ajax function and append it to your photos div
    }
});

这样的事情可能会得到你正在寻找的结果。

我如何修复无尽的卷轴，以便它可以做无尽/无限滚动？

1 个答案: