Skip to content

Instantly share code, notes, and snippets.

@eliooses
Created September 3, 2015 10:25
Show Gist options
  • Save eliooses/c070d6e3777376865265 to your computer and use it in GitHub Desktop.
Save eliooses/c070d6e3777376865265 to your computer and use it in GitHub Desktop.
Endless Scrolling for API call with specific parameters.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0px;
border: 0px;
padding: 0px;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 44px;
}
.title {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
color: #ffffff;
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<div id="movies"></div>
<script type="text/javascript">
var page = 0;
var pageToSave = JSON.stringify(page)
localStorage.setItem("pagina", pageToSave);
function loadMore() {
var page = localStorage.getItem("pagina");
console.log(page);
page = parseInt(page);
console.log(page);
page = page+1;
var pageToSave = JSON.stringify(page)
localStorage.setItem("pagina", pageToSave);
console.log(page);
$.get("https://yts.to/api/v2/list_movies.json?limit=50&page="+page, function (data) {
yify = data;
i = 0;
var html = "";
$.each(yify.data.movies, function (i, movie) {
html+='<div style="background-image:url('+movie.background_image+');background-position:center;background-size:cover;background-repeat:no-repeat;width:25%;height:400px;position:relative;float:left;"><a href="bittorrent://'+movie.torrents[0].hash+'" title="'+movie.title+'" target="_blank"><img title="'+movie.title+'" alt="'+movie.title+'" src="'+movie.medium_cover_image+'" style="width: 100%; max-width: 180px; position: relative;" /></a><a href="bittorrent://'+movie.torrents[0].hash+'" title="'+movie.title+'" target="_blank"><p class="title">'+movie.title+'</p></a></div>';
i++;
});
page=page++;
$('#movies').append(html);
});
}
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
loadMore();
}
});
$(document).ready(function() {
loadMore();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment