ajax 瀑布流效果
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
*{
margin: 0;
padding: 0;
}
#ul1{
width: 1250px;
margin: 100px auto;
}
#ul1 li{
width: 250px;
list-style: none;
float: left;
}
#ul1 li div{
border: 1px solid #ccc;
padding: 10px;
margin-bottom:10px ;
}
#ul1 li img{
width: 225px;
display: block;
}
</style>
<script src="13ajax.js"></script>
</head>
<body>
<!--<ul id="ul1">
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/170803_8aba64didf76gb2b2186hg37be4f5_640x960.jpg_468x468.jpg">
<p>夏上新韩版气质时尚POLO领格子衬衫高腰显瘦九分阔腿裤套装女</p>
</div>
</li>
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/170803_8aba64didf76gb2b2186hg37be4f5_640x960.jpg_468x468.jpg">
<p>夏上新韩版气质时尚POLO领格子衬衫高腰显瘦九分阔腿裤套装女</p>
</div>
</li>
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/170803_8aba64didf76gb2b2186hg37be4f5_640x960.jpg_468x468.jpg">
<p>夏上新韩版气质时尚POLO领格子衬衫高腰显瘦九分阔腿裤套装女</p>
</div>
</li>
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/170803_8aba64didf76gb2b2186hg37be4f5_640x960.jpg_468x468.jpg">
<p>夏上新韩版气质时尚POLO领格子衬衫高腰显瘦九分阔腿裤套装女</p>
</div>
</li>
</ul>-->
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
window.onload=function(){
/*ajax('get','getPics.php','cpage=1',function(data){
alert(data);
console.log(data)
})*/
var oUl=document.getElementById('ul1');
var aLi=document.getElementsByTagName('li');
var iLen=aLi.length;
var iPage=1;
var b=true;
getList();
function getList() {
ajax('get', 'getPics.php', 'cpage='+iPage, function (data) {
//把数据解析成对象
var data = JSON.parse(data);
for (var i = 0; i < data.length; i++) {
var _index = getShort();
var oDiv = document.createElement('div');
var oImg = document.createElement('img');
oImg.src = data[i].image;
oImg.style.width = '225px';
oImg.style.height = data[i].height * (225 / data[i].width) + 'px';
oDiv.appendChild(oImg);
var oP = document.createElement('p');
oP.innerHTML = data[i].title;
oDiv.appendChild(oP);
aLi[_index].appendChild(oDiv);
}
b=true;
});
}
window.onscroll=function(){
var _index=getShort();
var oLi=aLi[_index];
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(oLi.offsetHeight<document.documentElement.clientHeight+scrollTop) {
if(b){
b=false;
getList();
iPage++;
}
}
};
//最短的高度
function getShort(){
var index=0;
//声明索引所对应的li的高度
var ih=aLi[index].offsetHeight;
for(var i=1;i<aLi.length;i++){
if(aLi[i].offsetHeight<ih){
index=i;
ih=aLi[i].offsetHeight
}
}
return index;//最后返回最短li索引
}
};
</script>
</html>
php部分: getPics.php
<?php
header('Content-type:text/html; charset="utf-8"');
/*
API:
getPics.php
参数
cpage : 获取数据的页数
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;
$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;
$content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content);
echo $content;
?>
ajax部分： 13ajax.js
function ajax(method,url,data,success){
var oAjax = null;
if(window.XMLHttpRequest){
oAjax=new XMLHttpRequest()
}else{
oAjax=new ActiveXObject("Microsoft.XMLHTTP")
}
if(method=="get"&&data){
url+="?"+data;
}
//第二步：打开文件
oAjax.open(method,url,true);
//第三步：发送
//如果是get方式
if(method=="get"){
oAjax.send()
}else{ //如果是post，需要设置头部，声明文档类型
oAjax.setRequestHeader('content-type','Content-Type", "application/x-www-form-urlencoded');
oAjax.send(data)
}
//第四步：返回内容
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status==200){
//如果成功且执行的函数
success(oAjax.responseText)
}else{
alert('出错，ERR：'+oAjax.status)
}
}
}
}
