瀑布流布局ajax插件使用

最新推荐文章于 2023-11-21 13:31:26 发布

cmseric

最新推荐文章于 2023-11-21 13:31:26 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/baidu_33352521/article/details/60965292

版权

目的：利用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>

cmseric

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
瀑布流布局ajax插件使用

目的：利用ajax插件做一个瀑布流的布局，熟悉ajax的使用。效果图：原理：图片块的插入方式加载第二页数据的时机判断用到的工具：1. H5Builder2.WampServer（用于建立本地服务器）布局样式部分：
复制链接

扫一扫