html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title > 原生 js 实现瀑布流 </title>
- <style type="text/CSS">
- body{
- overflow: scroll;
- height: 1000px;
- }
- *{
- margin: 0;
- padding: 0;
- }
- #main{
- position: relative;
- }
- .box{
- padding: 15px 0 0 15px;
- float: left;
- }
- .pic{
- padding: 10px;
- border:1px solid #CCC;
- border-radius: 5px;
- box-shadow: 0 0 5px #ccc;
- }
- .pic img{
- width: 165px;
- height: auto;
- }
- </style>
- </head>
- <body>
- <div id="main">
- <div class="box">
- <div class="pic">
- <img src="images/1.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/2.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/3.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/4.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/5.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/6.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/7.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/8.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/9.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/10.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/9.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/8.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/7.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/6.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/5.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/4.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/3.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/2.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/1.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/5.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/6.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/7.jpg">
- </div>
- </div>
- <div class="box">
- <div class="pic">
- <img src="images/8.jpg">
- </div>
- </div>
- </div>
- <script type="text/javascript">
- window.onload=function(){
- waterfall('main','box');
- var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'},{"src":'4.jpg'}]}
- // 滚动添加
- window.onscroll=function(){
- if(checkScrollSlide()){
- var oParent=document.getElementById('main')
- // 将数据库渲染到当前页面的尾部
- for(var i=0;i<dataInt.data.length;i++){
- var oBox=document.createElement('div');
- oBox.className='box';
- oParent.appendChild(oBox);
- var oPic=document.createElement('div');
- oPic.className='pic';
- oBox.appendChild(oPic);
- var oImg=document.createElement('img');
- oImg.src="images/"+dataInt.data[i].src;
- oPic.appendChild(oImg);
- }
- waterfall('main','box');
- }
- }
- }
- function waterfall(parent,box){
- // 将 main 下的所有 class 为 box 的元素取出来
- var oParent=document.getElementById(parent);
- var oBoxs=getByClass(oParent,box);
- // 计算整个页面的显示雷氏 (页面 / box 的宽)
- var oBoxW=oBoxs[0].offsetWidth;
- var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
- //console.log(cols);
- // 设置 main 的宽
- oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto';
- var hArr=[];// 存放每一列高度
- for(var i=0;i<oBoxs.length;i++){
- if(i<cols){
- hArr.push(oBoxs[i].offsetHeight);
- }
- else{
- var minH=Math.min.apply(null,hArr);
- var index=getMinhIndex(hArr,minH);
- oBoxs[i].style.position="absolute";
- oBoxs[i].style.top=minH+'px';
- oBoxs[i].style.left=oBoxW*index+'px';
- hArr[index]+=oBoxs[i].offsetHeight;
- }
- }
- }
- // 根据 Class 获取元素
- function getByClass(parent,clsName){
- var boxArr=new Array(),// 用来存储获取到的所有 class 为 Box 的元素
- oElements=parent.getElementsByTagName('*');
- for(var i=0;i<oElements.length;i++){
- if (oElements[i].className==clsName) {
- boxArr.push(oElements[i]);
- }
- }
- return boxArr;
- }
- function getMinhIndex(arr,val){
- for(var i in arr){
- if(arr[i]==val){
- return i;
- }
- }
- }
- // 检测是否具备了滚动条件
- function checkScrollSlide(){
- var oParent=document.getElementById('main');
- var oBoxs=getByClass(oParent,'box');
- var lastBoxH=oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
- var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
- var height=document.body.clientHeight || document.documentElement.clientHeight;
- return (lastBoxH<scrollTop+height)?true:false;
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/30465/2dbc8b42a2d3599ab0adb89d89b51f41.html