Infinity Scroll
by edgardleal
HTML
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div id="output">
</div>
CSS
#output {
border: 1px solid;
}
.title, .footer {
text-align: center;
}
.footer {
font-size: 12px;
}
JavaScript
(function($) {
$.infinity = function(options) {
var defaults = {
url: '',
dataType: 'html',
autoScroll: true,
offset: 0,
limit: 10,
fail: function() {},
success: function() {},
done: function() {},
pageIndex: 0
}
var _offset;
var plugin = this;
plugin.settings = {};
plugin.init = function() {
plugin.settings = $.extend({}, defaults, options);
_offset = plugin.settings.offset;
plugin.urlSufixTemplate = new Function("limit",
"offset",
"pageIndex",
"return `" + plugin.settings.url + "`;");
_setupAutoScroll();
}
plugin.go = function(url) {
plugin.settings.offset = _offset;
if (url !== undefined) {
plugin.settings.url = url;
}
_doSearch();
return this;
};
plugin.more = function() {
plugin.settings.offset += plugin.settings.limit;
_doSearch();
return this;
};
var _setupAutoScroll = function(){
if(plugin.settings.autoScroll === false) {
return this;
}
$(window).scroll(function() {
if (($(window).scrollTop() + $(window).height()) ===
$(document).height()) {
plugin.more();
}
});
return this;
};
var _doSearch = function() {
plugin.settings.pageIndex += 1;
var url = plugin.urlSufixTemplate.call(plugin,
plugin.settings.limit,
plugin.settings.offset,
plugin.settings.pageIndex);
$.ajax({
type: 'GET',
url : url,
dataType:...