建设一个网站哪家好,1688会提供网站建设,网站新闻不添加关键词超链接对优化有影响吗,集团企业网站建设方案策划书转载链接#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拉到底部就是实现异步数据加载了当然了实际项目还要加上如果没数据了要怎么显示怎么操作。这些加判断就行了。
