原生JS实现瀑布流效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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; ?>
以上是关于原生JS实现瀑布流效果的主要内容，如果未能解决你的问题，请参考以下文章