ajax瀑布流实例

最新推荐文章于 2021-09-06 18:40:35 发布

冰雪为融

最新推荐文章于 2021-09-06 18:40:35 发布

阅读量462

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： ajax 瀑布流实例

本文链接：https://blog.youkuaiyun.com/lhjuejiang/article/details/79492405

ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用Ajax实现的瀑布流布局技术，重点讲解了如何根据固定列数动态加载图片，并确保图片能够按照高度最小原则排列。同时，还介绍了如何在用户滚动页面时自动加载更多内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax瀑布流实例

瀑布流：效果分为两类：

第一种是固定列数（蘑菇街效果）、第二种：随着窗口的大小，列数发生改变（百度图片、花瓣网）

接下来我们主要针对第一种固定列数的情况进行详细的说明

接下来我主要介绍的是第一种方式

原理：通过ajax从后台获取数据，然后利用dom操作添加到页面中。并且每次添加图片的时候将图片添加到li高度最小的上面，当滚动条滚动的距离与页面可视区距离之和大于li高度最小的高度与其顶部到body顶部距离之和时，开始加载下一屏数据

下面是整个实现过程的代码，后面会进行部分解释

html代码

<body>
	<ul id="ul1">
    	<li></li>
      	<li></li>
        <li></li>
        <li></li>
    </ul>
</body>

css代码

<style>
#ul1{width:1200px;margin:100px auto 0px;}
li{width:247px; list-style:none; float:left; margin-left:10px; margin-bottom:10px; }
li div{border:1px solid black; padding:10px;}
li div img{width:225px; display:block;}
</style>

js代码

封装好的利用ajax获取后台数据的代码

function ajax(method, url, data, success) {
	var xhr = null;
	try {//创建ajax对象的兼容处理方法
		xhr = new XMLHttpRequest();//IE7以上的浏览器以及标准浏览器
	} catch (e) {
		xhr = new ActiveXObject('Microsoft.XMLHTTP');//IE7及以下IE浏览器的创建方法
	}
	
	if (method == 'get' && data) {
		url += '?' + data;
	}
	
	xhr.open(method,url,true);
	if (method == 'get') {
		xhr.send();//get方式发送请求
	} 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);//ajax从后台获取的数据都存放在xhr.responseText中
			} else {
				alert('出错了,Err：' + xhr.status);
			}
		}
		
	}
}

<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);//利用JSON的parse方法将获取的数据从字符串格式转变为它本来的数据格式
						
			for ( var i=0; i<data.length; i++ ) {//通过for循环动态添加数据
				
				//获取高度最小的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();
		var oLi = aLi[_index];
		var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
		if(getShort(oLi)+oLi.offsetHeight<scrollTop+document.documentElement.scrollTop){//如果最短的li的高度与其到页面顶端的距离之和小于滚动条滚动的距离与页面可视区高度之和，则进行下一屏数据的加载
			if(b){//添加开关，防止因为滚动条不断被触发而导致不断的进行下一屏数据的加载
			iPage++;
			getList();
				}
			
			}
		
		}
	
	
	function getShort() {//该封装函数用来获取高度最小的li
		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){该函数获取li顶端到页面顶端的距离
		var iTop = 0;
		while(obj){
			iTop += obj.offsetTop;
			obj = obj.offsetParent;
			}
			return iTop;
		}
	
	
	
}
		
</script>