Fala pessoal... Estou desenvolvendo um aplicação onde obtenho os dados via JSON e modelo eles via javascript, até aqui tudo certo...
Preciso de uma ajuda para criar um infinite scroll em javascript, mostrando 10 resultado e ao chegar no final da página ele carrega mais 10, até terminar os dados.
Qual seria a melhor forma de fazer isto?
Abaixo segue meu código:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Xtart</title>
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url="http://xt.art.br/br.art.xt.xtart/API/";
$("#news").html("");
$.getJSON(url,function(data){
$.each(data.members, function(i,user){
var tblRow =
"<div class='posts' style='background-image: url("+user.guid+");'>"
+"<input type='hidden' value='"+user.ID+"'/>"
+"<div class='post_title'><div>"+user.post_title+"</div></div>"
+"</div>";
$(tblRow).appendTo("#news");
});
});
});
</script>
<style type="text/css">
#news{ float: left; width: 100%;}
.posts{float: left; width: 100%; height: 200px; margin-bottom: 10px; background-position: center; background-size: cover;}
.post_title{margin-top:120px; height: 80px; background-image:url(bg_post_title.png); background-repeat: repeat;}
.post_title div{color: #FFFFFF !important; padding: 2px; text-transform: uppercase; text-shadow: 1px 1px #444}
</style>
</head>
<body>
<div id="news"></div>
</body>
</html>