Ajax瀑布流

最新推荐文章于 2025-09-06 09:16:00 发布

原创最新推荐文章于 2025-09-06 09:16:00 发布 · 687 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Javascript

本文介绍了一种使用Ajax实现的瀑布流布局技术，通过不断加载数据来填充不同长度的列，实现了良好的用户体验。该技术适用于图片展示等场景。

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中使用它

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

?>

这部分代码是我们获取这个网站的图片数据所需要的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++ ) {
				
				//获取高度最短的li
				var _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标签，但需要注意几个问题，一是可视区域到最底的时候只能触发一次获取，二是下一张插入的图片必须要插入到上面最短的图片后面，获取图片的实际高度，否则会出现加载未完成，计算失误的问题。