Ajax瀑布流

来源：互联网发布：mx master mac 编辑：程序博客网时间：2024/05/16 06:46

Ajax瀑布流是一种现在非常常见的技术，比如说微博首页(weibo.com)向下滚动自动加载出来的消息，或是百度图片向下滚动加载(image.baidu.com)。大体分为固定列和不固定列。顾名思义固定列就是不论屏幕大小一行始终是那么多列。而不固定列就是根据可视区域的大小进行调整（比如百度首页就是这种形式）。

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);}}}}

这是最重要的xhr调用部分我们直接在Js中使用它

<?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;?>

这部分代码是我们获取这个网站的图片数据所需要的PHP代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>body {margin: 0;}#ul1 {width: 1080px; margin: 100px auto 0;}li { width: 247px; list-style: none; float: left; margin-right: 10px; }li div {border: 1px solid #000; padding: 10px; margin-bottom: 10px;}li div img { width: 225px; display: block;}</style><script src="ajax.js"></script><script>window.onload = function() {var oUl = document.getElementById('ul1');var aLi = oUl.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);if ( !data.length ) {//后续没有数据了return ;}for ( var i=0; i<data.length; i++ ) {//获取高度最短的livar _index = getShort();var oDiv = document.createElement('div');var oImg = document.createElement('img');oImg.src = data[i].preview;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();//最短一列Li进入可视区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<iLen; 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></head><body><ul id="ul1">    <li></li>      <li></li>        <li></li>        <li></li>    </ul></body></html>

这是一个四列固定瀑布流布局。思路很简单首先建立4个li布局然后向li中插入div包裹着的img标签，但需要注意几个问题，一是可视区域到最底的时候只能触发一次获取，二是下一张插入的图片必须要插入到上面最短的图片后面，获取图片的实际高度，否则会出现加载未完成，计算失误的问题。

0 0