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 文件即可看到效果。