html
<body> ???<div id="more"> ???????<div class="single_item"> ???????????<div class="date"></div> ???????????<div class="author"></div> ???????????<div class="title"></div> ???????</div> ???????<a href="javascript:;" class="get_more">点击加载</a> ???</div> ???<script src="jquery.min.js"></script> ???<script src="jquery.more.js"></script> ???<script> ???????$(function() { ???????????$(‘#more‘).more({ ???????????????‘address‘: ‘data.php‘ ???????????}) ???????}); ???</script></body>php
// 连接数据库require_once(‘connect.php‘);$last = $_POST[‘last‘];$amount = $_POST[‘amount‘];$query = mysql_query("select * from article order by id desc limit $last,$amount");while ($row = mysql_fetch_array($query)) { ???$sayList[] = array( ???????‘title‘ => $row[‘title‘], ???????‘author‘ => $row[‘id‘], ???????‘date‘ => date(‘m-d H:i‘, $row[‘addtime‘]) ???);}echo json_encode($sayList);接口返回的数据格式
[ ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-04 10:34" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-04 09:52" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-04 09:18" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-03 23:44" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-03 23:09" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-03 22:33" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-03 20:25" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-03 08:26" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-02 21:56" ?}, ?{ ???"title": "xxx", ???"author": "1", ???"date": "04-02 08:52" ?}]ps：返回的数据key与class相对应
jquery.more.js
/** * 调用方法： $(‘#more‘).more({‘url‘:‘data.php‘}); * amount ??每次显示记录数 * address ?请求的地址 * format ??接受数据的格式 * template html记录DIV的class属性 * trigger ?触发加载更多记录的class属性 * scroll ??是否支持滚动触发加载 * offset ??滚动触发加载时的偏移量 * data ????自定义参数 * loading ?加载时显示 */(function($) { ???var target = null; ???var template = null; ???var lock = false; ???var cur_last = 0; ???var variables = { ???????‘last‘ : 0 ???} ???var settings = { ???????‘amount‘ ??: ‘10‘, ???????‘address‘ ?: ‘comments.php‘, ???????‘format‘ ??: ‘json‘, ???????‘template‘ : ‘.single_item‘, ???????‘trigger‘ ?: ‘.get_more‘, ???????‘scroll‘ ??: ‘false‘, ???????‘offset‘ ??: ‘100‘, ???????‘data‘ ????: {}, ???????‘loading‘ ?: ‘加载中...‘ ???} ???var methods = { ???????init: function(options) { ???????????return this.each(function() { ???????????????if (options) { ???????????????????$.extend(settings, options); ???????????????} ???????????????template = $(this).children(settings.template).wrap(‘<div/>‘).parent(); ???????????????template.css(‘display‘, ‘none‘); ???????????????$(this).append(‘<div class="loading">‘ + settings.loading + ‘</div>‘); ???????????????template.remove(); ???????????????target = $(this); ???????????????if (settings.scroll == ‘false‘) { ???????????????????$(this).find(settings.trigger).bind(‘click.more‘, methods.get_data); ???????????????????$(this).more(‘get_data‘); ???????????????} else { ???????????????????if ($(this).height() <= $(this).attr(‘scrollHeight‘)) { ???????????????????????target.more(‘get_data‘, settings.amount * 2); ???????????????????} ???????????????????$(this).bind(‘scroll.more‘, methods.check_scroll); ???????????????} ???????????}) ???????}, ???????check_scroll: function() { ???????????if ((target.scrollTop() + target.height() + parseInt(settings.offset)) >= target.attr(‘scrollHeight‘) && lock == false) { ???????????????target.more(‘get_data‘); ???????????} ???????}, ???????debug: function() { ???????????var debug_string = ‘‘; ???????????$.each(variables, function(k, v) { ???????????????debug_string += k + ‘ : ‘ + v + ‘\n‘; ???????????}) ???????????alert(debug_string); ???????}, ???????remove: function() { ???????????target.children(settings.trigger).unbind(‘.more‘); ???????????target.unbind(‘.more‘) ???????????target.children(settings.trigger).remove(); ???????}, ???????add_elements: function(data) { ???????????var root = target ???????????var counter = 0; ???????????if (data) { ???????????????$(data).each(function() { ???????????????????counter++ ???????????????????var t = template ???????????????????$.each(this, function(key, value) { ???????????????????????if (t.find(‘.‘ + key)) t.find(‘.‘ + key).html(value); ???????????????????}) ???????????????????if (settings.scroll == ‘true‘) { ???????????????????????root.children(‘.loading‘).before(t.html()) ???????????????????} else { ???????????????????????root.children(settings.trigger).before(t.html()) ???????????????????} ???????????????????root.children(settings.template + ‘:last‘).attr(‘id‘, ‘more_element_‘ + ((variables.last++) + 1)); ???????????????}) ???????????} else methods.remove() ???????????// target.children(‘.loading‘).css(‘display‘, ‘none‘); ???????????if (counter < settings.amount){ ???????????????methods.remove(); ???????????????target.children(‘.loading‘).html("已经到底了"); ???????????} ???????}, ???????get_data: function() { ???????????var ile; ???????????lock = true; ???????????target.children(".loading").css(‘display‘, ‘block‘); ???????????$(settings.trigger).css(‘display‘, ‘none‘); ???????????if (typeof(arguments[0]) == ‘number‘) { ???????????????ile = arguments[0]; ???????????} else { ???????????????ile = settings.amount; ???????????} ???????????if(variables.last >= cur_last) { ???????????????var postdata = settings.data; ???????????????postdata[‘last‘] = variables.last; ???????????????postdata[‘amount‘] = ile; ???????????????$.post(settings.address, postdata, function(data){ ???????????????????$(settings.trigger).css(‘display‘, ‘block‘) ???????????????????methods.add_elements(data) ???????????????????lock = false; ???????????????}, settings.format); ???????????????cur_last = cur_last + 10; ???????????} ???????} ???}; ???$.fn.more = function(method) { ???????if (methods[method]) { ???????????return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); ???????} else if (typeof method == ‘object‘ || !method) { ???????????return methods.init.apply(this, arguments); ???????} else $.error(‘Method ‘ + method + ‘ does not exist!‘); ???} ???$(document).ready(function() { ???????$(window).on(‘scroll‘, function() { ???????????if ($(document).scrollTop() + $(window).height() > $(document).height() - 10) { ???????????????$(‘.get_more‘).click(); ???????????} ???????}); ???});})(jQuery)使用jquery.more.js来实现滚动加载数据
原文地址：http://www.cnblogs.com/chenjiacheng/p/7428502.html