一、瀑布流的ajax应用
1、制作原理
列等宽型瀑布流:花瓣网
画图说明
2、准备的文件
数据文件接口
ajax函数(已经封装好)
3、函数的编写
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
width: 1000px;
margin: 50px auto;
}
ul li{
width: 227px;
float: left;
list-style: none;
margin-right: 10px;
}
ul li div{
width: 227px;
border: 1px solid #ddd;
box-sizing: border-box;
margin-top: 10px;
}
ul li div img{
display: block;
width: 225px;
}
ul li div p{
width: 225px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</body>
<script src="ajax_util.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var aLi=document.querySelectorAll('li');
var page=1;
var b=true;
getlist(page);
window.onscroll=function(){
var index3=getShort();
var srollTop=document.documentElement.scrollTop||document.body.scrollTop;
var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
var oLishort=aLi[index3].offsetHeight;
if (srollTop+clientHeight>aLi[0].offsetTop+oLishort) {
if(b==true){
b=false;
console.log(b);
page++;
console.log(page);
getlist(page);
}
}
}
function getlist(page){
ajax('GET','getPics.php','cpage='+page,function(data){
var arr=JSON.parse(data);
console.log(arr[0].image)
for (var key in arr) {
var index2=getShort();
var oDiv=document.createElement('div');
var oImg=document.createElement('img');
var oP=document.createElement('p');
oImg.style.width='225px';
oImg.style.height=(225/arr[key].width)*arr[key].height+'px';
oImg.src=arr[key].image;
oP.innerHTML=arr[key].title;
oDiv.appendChild(oImg);
oDiv.appendChild(oP);
aLi[index2].appendChild(oDiv);
};
b=true;
});
}
function getShort(){
var index1=0;
var iH=aLi[index1].offsetHeight;
for (var i=1;i<aLi.length;i++) {
if (aLi[i].offsetHeight<iH) {
iH=aLi[i].offsetHeight;
index1=i;
};
}
return index1;
}
</script>
</html>
备注:
1、调用的ajax工具为前面发表的ajax封装函数;
2、要有一个外源数据库(’getPics.php’);