我該如何修復無盡的滾動，以便它可以做無盡/無限滾動？

我寫了一個基於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>

來源

2013-10-29 user244394

你可以做的是把另一格在你的「照片」 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 
    } 
});

像這樣的東西可能會得到你正在尋找的結果。

來源

2013-10-29 03:15:55 jas7457

我忘了說你應該在你的ajax函數被調用並且圖像被追加後再次將'loading'變量設置爲false。 – jas7457

我該如何修復無盡的滾動，以便它可以做無盡/無限滾動？

回答

相關問題