瀑布流布局
效果如图：
HTML代码结构：
<!DOCTYPE html> <html> <head> <meta http-equiv="Countent-Type" content="text/html;charset=UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="main"> <div class="box"> <div class="imgCom"> <img src="images/1.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/2.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/3.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/4.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/5.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/6.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/7.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/8.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/9.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/10.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/11.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/12.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/13.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/14.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/15.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/16.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/17.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/18.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/19.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/20.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/21.jpg"> </div> </div> <div class="box"> <div class="imgCom"> <img src="images/22.jpg"> </div> </div> </div> </body> </html>
*{ padding: 0; margin: 0;} #main{ position: relative;} .box{ padding: 15px 0 0 15px; float: left; width: 230px; } .imgCom{ border: 1px solid #ccc; border-radius: 4px; box-shadow: 0px 0px 4px #ccc;} .imgCom img{ display: block; padding: 15px;}
一，用原生js来写：
window.onload=function(){ waterfall("main","box"); //模拟后台数据加载 var dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"}]} window.onscroll=function(){ if(checkScrollSlide){ var oPartent=document.getElementById("main"); for(var i=0;i<dataInt.data.length;i++){ var oBox=document.createElement("div");//创建一个div元素 oBox.className="box"; oPartent.appendChild(oBox); var oImgCom=document.createElement("div"); oImgCom.className="imgCom"; oBox.appendChild(oImgCom); var oImg=document.createElement("img"); oImg.src="images/"+dataInt.data[i].src; oImgCom.appendChild(oImg); } waterfall("main","box"); } } } //瀑布流基础设置 function waterfall(partent,box){ var oPartent=document.getElementById(partent); var oBoxs=getByClass(oPartent,box); //计算整个页面显示的列数（页面宽度/box宽度 *取整） var oBoxW=oBoxs[0].offsetWidth; var cols=Math.floor(document.documentElement.clientWidth/oBoxW); //设置main的宽 oPartent.style.cssText="width:"+cols*oBoxW+"px; margin:0px auto; padding-right:15px;" 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"; // oBoxs[i].style.left=oBoxs[index].offsetLeft+"px"; hArr[index]+=oBoxs[i].offsetHeight;//更新添框快后的列高 } } } //获取数组中某值的索引 function getMinhIndex(arr,val){ for(var i in arr){ if(arr[i]==val){ return i; } } } //将main下的所有class为box的元素取出来 function getByClass(partent,clsName){ var boxArr=new Array(),//用来存储获取到的所有class为box的元素 oElement=partent.getElementsByTagName("*");//获取之下的所有元素 for(var i=0;i<oElement.length;i++){ if(oElement[i].className==clsName){ boxArr.push(oElement[i]);//存储到数组中 } } return boxArr; } //检查滚动条是否具备了加载数据块的条件 function checkScrollSlide(){ var oPartent=document.getElementById("main"); var oBoxs=getByClass(oPartent,"box"); var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length].offsetHeight/2);//最后一块距离顶部高度+自身的一半高度 var scrollH=document.body.scrollTop||document.documentElement.scrollTop;//滚动的高度 var winH=document.body.clientHeight||document.documentElement.clientHeight; return (lastBoxH-scrollH<winH)?true:false; }
二，用jquery框架来写
$(function(){ waterfall("#main",".box"); var dataInt={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},{"src":"11.jpg"},{"src":"12.jpg"}]} $(window).scroll(function(){ if(checkScrollSlide){ for(var i=0;i<dataInt.data.length;i++){ $("#main").append("<div class='box'><div class='imgCom'><img src='images/"+dataInt.data[i].src+"'/></div></div>") } waterfall("#main",".box"); } }) }) //瀑布流基础设置 function waterfall(parent,box){ var oBoxw=$(box).width()+15; var cols=parseInt($(window).width()/oBoxw);//计算整个页面显示的列数（页面宽度/box宽度 *取整） $(parent).css({"width":cols*oBoxw,"margin":"0 auto","padding-left":"15px"}); var hArr=[];//存放每一列的高度 for(i=0;i<$(box).length;i++){ if(i<cols){ hArr.push($(box).eq(i).height()+15); } else{ var minH=Math.min.apply(null,hArr);//获取第一行高度最小的值 var index=getMinHIndex(hArr,minH);//获取该值在数组中的索引 $(box).eq(i).css({"position":"absolute","top":minH,"left":oBoxw*index+15}); hArr[index]+=$(box).eq(i).height()+15; } } } //获取数组中某值的索引 function getMinHIndex(arr,val){ for(var i=0;i<arr.length;i++){ if(arr[i]==val){ return i; } } } //检查滚动条是否具备了加载数据块的条件 function checkScrollSlide(){ var lastH=($(".box:last").height()+15)/2+$(".box:last").offset().top;//最后一块距离顶部高度+自身的一半高度 var windH=$(window).height(); var scrollH=$(document).scrollTop();//滚动的高度 return (lastH-scrollH<windH)?true:false; }
三、用css3来写：
待续......
