原来做过的商城项目现在需要增加下拉加载的功能，简单的实现了一下。大概可以整理一下思路跟代码。
把需要下拉加载的内容进行转为JSON处理存在当前页面：
<script type="text/javascript">var objson = eval([{"Id":"5991","product_name":"正品璐瑶颈肩按摩器 披肩颈椎按摩","order_by":"98569","is_show":"True","price":"428","sale_price":"399","Images":"saxjua16.jpg"},{"Id":"5990","product_name":"多功能绞肉机 家用料理机 电动搅拌机","order_by":"98568","is_show":"True","price":"429","sale_price":"399","Images":"d2yjivhl.jpg"},....更多省略]</script>
下面就是javascript代码的事情了
<script type="text/javascript"> $(document).ready(function () { var totalheight = 0; function loadData() { totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if ($(document).height() <= totalheight) { GetProducts();//加载数据 } } $(document).scroll(function () { loadData(); }); function GetProducts() { var htmlSource; var iIndex = 6; //每次加载元素数量 var icount = parseInt($("#hidJsonCount").val()); //已加载数量 作为for下标值 var obj = objson; if (obj.length - icount < 6) { iIndex = obj.length - icount; } if (icount < obj.length) { for (var i = icount; i < (icount+iIndex); i++) { var val = obj[i]; htmlSource += ‘<div class="deal">‘; htmlSource += ‘<a href="p_show.aspx?productId=‘ + val.Id + ‘" target="_blank">‘; htmlSource += ‘<img src="http://www.baidu.com/upload-file/images/product/‘ + val.Images + ‘" border="0" title="‘ + val.product_name + ‘"></a>‘; htmlSource += ‘<h3>‘; htmlSource += ‘<a href="p_show.aspx?productId=‘ + val.Id + ‘" title="‘ + val.product_name + ‘" target="_blank">‘ + val.product_name + ‘</a>‘; htmlSource += ‘</h3>‘; htmlSource += ‘<h4>‘; htmlSource += ‘<em><b>￥</b>‘ + val.sale_price + ‘</em><a href="p_show.aspx?productId=‘ + val.Id + ‘" target="_blank">查看</a>‘; htmlSource += ‘</h4>‘; htmlSource += ‘<span class="newicon"></span>‘; htmlSource += ‘</div>‘; } $("#hidJsonCount").val((icount + iIndex).toString()); } $("#moreProduct").append(htmlSource); } }); </script>
$("#hidJsonCount").val();此处为一个input hidden的隐藏标签 用来存储已经加载了多少数据。
至此功能完结。