转载请注明出处：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>百度搜索</title>
<style>
body,ul,li{margin:0; padding:0; list-style: none;}
ul{width:100%; margin:0 auto;}
li{width:24%; float:left; margin-left:0.5%; margin-right:0.5%;}
li div{width:96%; margin-left:1%; margin-right:1%; padding:1%; margin-bottom:6%; border: 1px #000000 dashed;}
strong{ float:left;width:100%; text-align:center; height:32px; line-height:32px;}
img { float:left; width:100%; height:100%; border: 1px #666666 solid;}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script>
var pFlog = true;
$(function(){
var iPage=1;
getLoad(iPage);
$(window).scroll(function(){
var pos=getShortestLi();
var $li=$("li:eq("+pos+")");
if($li.height()+$li.offset().top < $(window).height()+$(window).scrollTop()){
if(pFlog){
iPage++;
getLoad(iPage);
pFlog = false;
}
}
})
});
function getLoad(iPage){
$.ajax({
"url":"http://www.wookmark.com/api/json/popular",
"type":"get",
"data":{"page":iPage},
"dataType":"jsonp",
"jsonp":"callback",
"jsonpCallback":"show"
});
}
function show(data){
if(data.length>0){
$.each(data,function(index,element){
$div = $("<div></div>");
$img = $("<img>");
$img.attr({
'src':element.image,
'height':50,
'width':(50/element.height)*element.width
});
$strong = $("<strong></strong>");
$p = $("<p></p>");
$strong.html(element.id);
$p.html(element.title);
var minLiIndex = getShortestLi();
$div.append($img).append($strong).append($p).appendTo($("li:eq("+minLiIndex+")"));
});
pFlog = true;
}
}
function getShortestLi(){
var minIndex=0;
var minHeight=$("li:eq(0)").height();
for(var i=1;i<$("li").length; i++){
var h=$("li:eq("+i+")").height();
if(h<minHeight){
minIndex=i;
minHeight=h;
}
}
return minIndex;
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>