javascript，js实现瀑布流代码
来源：原创
时间：2015-08-26
作者：脚本小站
分类：JS/JQuery
瀑布流对于用户体验很好，很多网站都在使用。下面提供这段代码给大家参考。
1.复制下面代码到demo.html文件。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Index</title>
<style type="text/css">
body{background:lightgreen;}
#water li{float:left;list-style:none;}
#water li div{background:white;padding:4px;margin:2px;}
img{border:2px solid black;}
</style>
</head>
<body>
</body>
<script>
var pwidth = 220; //图片的固定宽度
var timmer; //保证滚动只执行一次
var timmer1; //保证调整尺寸只执行一次
var lieshu; //用于调整尺寸的时候，优化
var data; //将现有数据缓存起来，调整尺寸的时候直接处理数据而不用去请求数据
//初始化操作
window.onload = function(){
lieshu = cols();
addul(lieshu);
getdata();
}
//滚动条滚动的时候触发
window.onscroll = function(){
//通过一个延时，来确保只会执行一次
if(timmer){
clearTimeout(timmer);
timmer = undefined;
}
timmer = setTimeout(function(){
//什么时候动态加载 当剩余高度小于指定值
//获取三高
//获取文档的高度
var dheight = document.documentElement.scrollHeight;
//这个是获取滚动条高度，后面是解决chrome兼容性
var sheight = document.documentElement.scrollTop || document.body.scrollTop;
var wheight = document.documentElement.clientHeight;
document.title = '文：'+dheight+'滚:'+sheight+'窗：'+wheight;
if(dheight - sheight - wheight < 300){
//我们只需要调用这个方法，这个方法会使用ajax去获取数据，然后调用process方法处理数据
getdata();
}
},100);
}
//在窗口尺寸改变的时候，我们要自适应
window.onresize = function(){
//alert(1);
var num = cols();
if(num != lieshu){
if(timmer1){
clearTimeout(timmer1);
timmer1 = undefined;
}
timmer1 = setTimeout(function(){
var ul = document.getElementById('water');
document.body.removeChild(ul);
lieshu = cols();
addul(lieshu);
//getdata();
process(data);
},100);
}
}
//计算出列数
function cols(){
var num = Math.floor((document.body.offsetWidth - 25) / (pwidth + 20));
return num;
}
//准备好一个结构（框架）
function addul(num){
var ul = document.createElement('ul');
ul.id = 'water';
//我们要插入4个li
for(var i = 0;i<num;i++){
var li = document.createElement('li');
ul.appendChild(li);
}
document.body.appendChild(ul);
}
//获取数据
function getdata(){
var ajax = getAjax();
ajax.open('GET','photo.php',true);
ajax.send();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
//alert(ajax.responseText);
//在这里要做很多操作
data = ajax.responseText;
process(data);
}
}
}
//处理数据
function process(json){
var obj = eval('('+json+')');
//alert(obj.length);
for(var i=0;i<obj.length;i++){
//一张图片的名字
var img = obj[i];
var div = document.createElement('div');
div.innerHTML = '<img src="./uploads/'+img+'" width="'+pwidth+'"/>';
var ul = document.getElementById('water');
var lis = ul.children;
//将我们的到的div（包裹了图片）插入到最短的一个li里面
var mask = -1; //所有列里面最小的高度
for(var j=0;j<lis.length;j++){
var height = lis[j].offsetHeight;
//alert(1);
if(mask == -1 || mask > height){
//最小的高度不是最小的
mask = height;
lis[j].appendChild(div);
}
}
}
}
//解决ajax兼容性
function getAjax(){
var ajax;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else{
ajax = new ActiveXObject('Microsoft.XMLHTTP');
}
return ajax;
}
</script>
</html>2.复制下面代码到photo.php文件。
<?php
//模拟数据库取数据
$arr = array();
//目录操作读取出所有文件名
$handle = opendir('./uploads');
while($file = readdir($handle)){
if($file == '.' || $file =='..') continue;
$arr[] = $file;
}
closedir($handle);
echo json_encode($arr);
?>3.新建一个uploads文件夹，在里面放入约20张图片。
4.用localhost 访问 demo.html 文件即可看到效果。