<!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){//判断网络畅通接收数据 200if(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列表 ??4var 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++){//获取当前最短的livar _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 代码
<?phpheader(‘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;?>
原生JS实现瀑布流效果
原文地址：http://www.cnblogs.com/paul0705/p/7750855.html