目的:利用ajax插件做一个瀑布流的布局,熟悉ajax的使用。
效果图:
原理:
图片块的插入方式
加载第二页数据的时机判断
用到的工具:
1. H5Builder
2.WampServer(用于建立本地服务器)
布局样式部分:
<body>
<div class="box">
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
width: 1000px;
height: 2000px;
margin: 50px auto;
background: #212121;
}
ul {
width: 100%;
}
li {
float: left;
width: 250px;
}
div {
width: 96%;
padding: 2%;
background: #808080
}
div img {
width: 100%;
}
准备文件:
1.ajax.js
function ajax(method, url, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err:' + xhr.status);
}
}
}
}
2.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;
?>
编写js函数:
<script src="ajax.js"></script>
<script type="text/javascript">
window.onload = function() {
var oUl = document.getElementById('ul1');
var aLi = oUl.getElementsByTagName('li');
var iPage = 1;
var b = true;//设置一个参数用于判断是否加载更多的页面数据
getList();
//获取图片列表数据与插入
function getList() {
ajax('get', 'getPics.php', 'cpage=' + iPage, function(data) {
var arr = JSON.parse(data);
for(var i=0;i<arr.length;i++){
var _index=getShort();
var oDiv=document.createElement('div');
var oImg=document.createElement('img');
oImg.src=arr[i].preview;
oImg.style.width='200px';
oImg.style.height=arr[i].height*(200/arr[i].width)+'px';
oDiv.appendChild(oImg);
var oP=document.createElement('p');
oP.innerHTML=arr[i].title;
oDiv.appendChild(oP);
aLi[_index].appendChild(oDiv);
}
if(!arr.lenth){
return;
}
b=true;
})
}
//当滚动至底部时候加载更多的数据
window.οnscrοll=function(){
var _index=getShort();
var oLi=aLi[_index];
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
if(getTop(oLi)+oLi.offsetHeight<document.documentElement.clientHeight+scrollTop){
if(b){
b=false;
iPage++;
getList();
}
}
}
//取得最短的图片
function getShort(){
var index=0;
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;
}
//获取当前内容的最高高度
function getTop(obj){
var iTop=0;
while(obj){
iTop+=obj.offsetTop;
obj=obj.offsetParent;
}
return iTop;
}
}
</script>