首页 > 代码库 > 瀑布流布局
瀑布流布局
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(checkscrollside()){ var oParent = document.getElementById(‘main‘);// 父级对象 for(var i=0;i<dataInt.data.length;i++){ var oBox=document.createElement(‘div‘); //添加 元素节点 oBox.className=‘box‘; //添加 类名 name属性 oParent.appendChild(oBox); //添加 子节点 var oWrap=document.createElement(‘div‘); oWrap.className=‘wrap‘; oBox.appendChild(oWrap); var oImg=document.createElement(‘img‘); oImg.src=‘./images/‘+dataInt.data[i].src; oWrap.appendChild(oImg); } waterfall(‘main‘,‘box‘); }; }}window.onresize=function(){console.log(‘窗口改变‘); waterfall(‘main‘,‘box‘);} function waterfall(parent,box){ var oBoxs=getByClass(parent,box); var oMain=document.getElementById(parent); var oBoxW=oBoxs[0].offsetWidth; //获取盒子的宽度 var num=Math.floor(document.documentElement.clientWidth/oBoxW); oMain.style.cssText=‘width:‘+num*oBoxW+‘px; margin:0 auto;‘; var hArr=[]; //保存高度的数组 for(var i=0; i<oBoxs.length; i++){ if(i<num){ hArr[i]=oBoxs[i].offsetHeight; oBoxs[i].style.position=‘absolute‘; oBoxs[i].style.top=0+‘px‘; oBoxs[i].style.left=oBoxW*i+‘px‘; }else{ var minH=Math.min.apply(null,hArr); //求出最小的高度作为下一个box的top值 var minHIndex=getminHIndex(hArr,minH); /*根据数组最小的值获取到它的索引*/ oBoxs[i].style.position=‘absolute‘; //改为绝对定位 oBoxs[i].style.top=minH+‘px‘; oBoxs[i].style.left=oBoxs[minHIndex].offsetLeft+‘px‘; hArr[minHIndex]+=oBoxs[i].offsetHeight; //最小高度增加 } }}/*根据classname和获取到元素*/function getByClass(parent,className){ var arr=[]; var oParent=document.getElementById(parent); var elements=oParent.getElementsByTagName(‘*‘); for(var i=0; i<elements.length;i++){ if(elements[i].className==className){ arr.push(elements[i]); } } return arr;}/*根据数组最小的值获取到它的索引*/function getminHIndex(arr,minH){ for(var i in arr){ if(arr[i]==minH){ return i; } }}/*判断是否滚动到了最后的高度*/function checkscrollside(){ var oBoxs=getByClass(‘main‘,‘box‘); var oMain=document.getElementById(‘main‘); var lastPinH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性 var documentH=document.documentElement.clientHeight;//页面高度 return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数}
#main{position:relative; }.box{padding:15px 0 0 15px; float:left;} //这里用padding可以方便用offsetHeight获得高度.wrap{padding:10px; box-shadow:0 0 5px #ccc;} //添加图片边框和阴影.box img{width:200px; height:auto;}
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>waterfall</title><link rel="stylesheet" href="style.css"><script src="script.js"></script></head><body><div id="main"> <div class="box"> <div class="wrap"> <img src="images/1.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/2.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/3.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/4.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/5.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/6.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/7.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/8.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/9.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/10.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/11.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/12.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/13.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/14.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/15.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/16.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/17.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/18.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/19.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/20.jpg"> </div> </div> <div class="box"> <div class="wrap"> <img src="images/21.jpg"> </div> </div></div></body></html>
amy的课程真心不错，先看视频，然后看代码，最后自己敲出来就可以了http://www.imooc.com/learn/101
课程里面的源码缩小后再放大会错位，我这里把第一行的元素也直接改成了定位，修复bug
瀑布流布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。