Scroll infinito sem paginação

[nataliajulieta 0]

Alguém poderia me ajudar com algum script ou ideia para fazer um scroll infinito sem que precise da paginação para isso. Tipo apenas que defina de quantos em quantos elementos eu vou querer que seja carregado.

[wilnet 92]

Segue o link de exemplo:

 

LINK

[wilnet 92]

Nesse outo vc controla a quantidade por scroll

 

Link

[xanburzum 169]

use plugin jquery, é fácil de implementar e fica um resultado ótimo.

 

tipo:

<ul id="infinite_scroll">
<%
     For i=1 to 10 
	
	%?>
           <li>
              <a href="">This is my some title and is at number <%=i%></a><p>Lorem ipsum dolor sit                  amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
            </li>
	<%
	Next
	%>
</ul>

Basta copiar estas linhas no seu arquivo CSS e você pode modificá-lo também, mas com cuidado.

#infinite_scroll{height:200px;overflow-y:scroll;margin-top:50px;border:1px solid #ccc;padding:10px;}
       #infinite_scroll a{font-weight:bold;}
       #infinite_scroll p{margin-bottom:20px;width:90%}
       .loading{text-align:right;margin-top:-100px}

Agora adicione seguintes scripts apenas dentro de sua cabeça tag html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/demos/js/scroll.jquery.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
 
			$( '#infinite_scroll' ).scrollLoad({
 
				url : 'my_scroll_ajax_file.php', //your ajax file to be loaded when scroll breaks ScrollAfterHeight
 
				getData : function() {
					//you can post some data along with ajax request
				},
 
				start : function() {
					$('<div class="loading"><img src="ajax-loader.gif"/></div>').appendTo(this);
// you can add your effect before loading data
				},
 
				ScrollAfterHeight : 95,			//this is the height in percentage after which ajax stars
 
				onload : function( data ) {
					$(this).append( data );
					$('.loading').remove();
				}, // this event fires on ajax success
 
				continueWhile : function( resp ) {
					if( $(this).children('li').length >= 100 ) { // stops when number of 'li' reaches 100
						return false;
					}
					return true; 
				}
			});
 
		});
 
		</script>