瀑布流布局ajax插件使用

来源：互联网发布：简谱五线谱转换软件编辑：程序博客网时间：2024/05/29 10:37

目的：利用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（数据文件接口）

<?phpheader('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.onscroll=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>

0 0