\* { margin:0; padding:0;}
body { font-size:12px;}
p{ margin: 5px;}
.box{
padding: 10px;
width: 300px;
height: 200px;
float: left;
overflow: hidden;
margin: 20px 40px;
}
$(function(){
var ENDDATA='<div id="do_load"><h3>At ready ready ready ready ready ready ready bottom,loading...:( </h3></div>';
$(window).bind('scroll',function(){do\_ajax\_show()});
function do\_ajax\_show() {
if($(window).scrollTop()+$(window).height()>=$(document).height())
{
do\_ajax\_load();
}
}
function do\_ajax\_load() {
var html="";
$.ajax({
type:'get',
dataType:'jsonp',
url:'http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
beforeSend:function(){
console.log('loading...');
$("#resText").after($(ENDDATA));
},
success:function(data){
$.each(data.items,function(i,item){
html+='<div class="box">';
html+='<h1>'+item.title+'</h1>';
html+='<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>'
html+='<div>'+item.tags+'</div>';
html+='</div>';
});
$("#resText").append($(html));
},
complete:function(){
console.log('mission acomplete.');
$("#do_load").remove();
}
});
}
})
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
scroll down
打完收工