原生JS实现瀑布流效果 

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset = "utf-8" />
		<style type="text/css">
		　　body{margin: 0;}
		　　#uli{width: 1080px; margin: 100px auto 0; }
		　　li{width: 248px; list-style: none; float: left; margin-right: 10px}
		　　li div{border: 1px solid gray; padding: 10px; margin-bottom: 10px}
		　　li div img{width: 225px; }
		</style>
		<script type="text/javascript">
　　　　　　　　　　　　function ajax(method, url, data, success_method){ //success_method 函数 下载到数据以后处理数据的方法
			var xhr = null;
			try{
				xhr = new XMLHttpRequest();
			}catch(error){
				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){
					//判断网络畅通接收数据 200
					if(xhr.status == 200){
						//<2>数据下载到了
						//处理该数据的函数
						
						//<3>执行函数 处理数据
						success_method && success_method(xhr.responseText);
					}else{
						alert("出错了,Err: " + xhr.status);
					}
				}
			}
		　　}

　　　　　　　　　　 </script>

		<script type="text/javascript">
		//【注】瀑布流实现的时候,每次添加的时候,我们都找到最短的那一列进行添加。
		
		//1.声明变量
		var oUl = null; //ul节点对象
		var aLi = null; //存储ul下面的所有li列表   4
		var iPage = 1;  //加载的页码
		var iLen = 0;
		var isloading = false;


		window.onload = function(){
			oUl = document.getElementById("uli");
			aLi = oUl.getElementsByTagName("li");  //获取oUl下的所有子节点为li的标签
			iLen = aLi.length;
			isloading = true;  
			getList();

			//【注】最短的一列li将要露白
			
		}


		window.onscroll = function(){
			//进行上啦加载
			var _index = getShort();
			var li = aLi[_index];
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			if(li.offsetHeight + li.offsetTop < scrollTop + document.documentElement.clientHeight){
				if(isloading == false){
					isloading = true;
					iPage++;
					alert(iPage);
					getList();
				}
			}
		}

		//下载数据
		function getList(){
　　　　　　　　　　　　　　//数据源通过PHP请求，相关代码请往下看
			ajax("get", "getPics.php", "page=" + iPage, function(data){
				var arr = JSON.parse(data);
				for(var i = 0; i < arr.length; i++){
					//获取当前最短的li
					var _index = getShort();

					//创建节点,添加数据,插入
					var oDiv = document.createElement("div");
					var oImg = document.createElement("img");
					oImg.src = arr[i].preview; //预览图片
					//给图片预设一个高度
					oImg.style.height = arr[i].height * (225 / arr[i].width) + "px";

					oDiv.appendChild(oImg);
					var oP = document.createElement("p");
					oP.innerHTML = arr[i].title;
					oDiv.appendChild(oP);
					//将当前div添加到最短的li标签中
					aLi[_index].appendChild(oDiv);
				}
				isloading = false;
			});
		}


		//找到最短的那条列表
		function getShort(){
			var index = 0;
			var ih = aLi[index].offsetHeight;
			for(var i = 1; i < iLen; i++){
				if(ih > aLi[i].offsetHeight){
					index = i;
					ih = aLi[i].offsetHeight;
				}
			}
			//返回最短li的下标
			return index;
		}

		</script>
	</head>
	<body>
		<ul id = "uli">
			<!-- 显示四列 -->
			<li>
			</li>
			<li>
			</li>
			<li>
			</li>
			<li>
			</li>
		</ul>
	</body>
</html>

//php 代码
<?php
header('Content-type:text/html; charset="utf-8"');

/*
API:
	getPics.php

		参数
		cpage : 获取数据的页数
*/
$cpage = isset($_GET['cpage']) ? $_GET['cpage'] : 1;

//page= 是加载数据的页数,1页有50条数据
$url = 'http://www.wookmark.com/api/json/popular?page=' . $cpage;

$content = file_get_contents($url);
$content = iconv('gbk', 'utf-8', $content);

echo $content;

?>

　　

 

　　

posted @ 2017-10-29 19:39  paul0705  阅读(258)  评论(0)    收藏  举报