vps 内存影响 网站,北京网站制作建设公司,seo的最终目的是?,电子科技公司网站转载链接#xff1a;http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法#xff0c;那来看看配合jsonp是如何实现的吧#xff0c;小菜总结记录之用#xff0c;高手勿喷。
当然本例子采用的是jquery库http://www.cnblogs.com/thinksley/archive/2013/05/12/3074237.html 滚动下拉到页面底部加载数据是很多瀑布流网站的做法那来看看配合jsonp是如何实现的吧小菜总结记录之用高手勿喷。
当然本例子采用的是jquery库后期会做成原生js。
本例的数据调用的是锋利的jquery一书提供的一段json。
首先要先判断页面怎么样才是滚动到底部也就是scrollTopwindow的height是否大于document的heightjquery如下代码: $(window).scrollTop()$(window).height()$(document).height()
再给window绑定scroll事件。所以整个页面demo可以这样做: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlnshttp://www.w3.org/1999/xhtml
head
title/titlemeta http-equivContent-Type contenttext/html; charsetutf-8 /
style typetext/css
* { margin:0; padding:0;}
body { font-size:12px;}
p{ margin: 5px;}
.box{ padding: 10px;}
/style!-- 引入jQuery --
script srchttp://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js typetext/javascript/script
script typetext/javascript
$(function(){$(window).bind(scroll,function(){show()});function show(){if($(window).scrollTop()$(window).height()$(document).height()){ajaxRead();}}function ajaxRead(){var html;$.ajax({type:get,dataType:jsonp,url:http://api.flickr.com/services/feeds/photos_public.gne?tagscartagmodeanyformatjsonjsoncallback?,beforeSend:function(){console.log(loading...)},success:function(data){$.each(data.items,function(i,item){htmldiv classbox;htmlh1item.title/h1;htmla hreftitem.linkimg srcitem.media.m//ahtmldivitem.tags/div;html/div;});$(#resText).append($(html));},complete:function(){console.log(mission acomplete.)}});}
})
/script
/head
body
p往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pp往下拉/pdiv idresText /div/body
/html拉到底部就是实现异步数据加载了当然了实际项目还要加上如果没数据了要怎么显示怎么操作。这些加判断就行了。
