瀑布流（源代码）
body中
1 <body> 2 <div id="main" style="width: 1100px;"> 3 <div class="box"> 4 <div class="pic"> 5 <img src="img/01.jpg" /> 6 </div> 7 </div> 8 <div class="box"> 9 <div class="pic"> 10 <img src="img/02.jpg" /> 11 </div> 12 </div> 13 <div class="box"> 14 <div class="pic"> 15 <img src="img/03.jpg" /> 16 </div> 17 </div> 18 <div class="box"> 19 <div class="pic"> 20 <img src="img/04.jpg" /> 21 </div> 22 </div> 23 <div class="box"> 24 <div class="pic"> 25 <img src="img/05.jpg" /> 26 </div> 27 </div> 28 <div class="box"> 29 <div class="pic"> 30 <img src="img/06.jpg" /> 31 </div> 32 </div> 33 <div class="box"> 34 <div class="pic"> 35 <img src="img/07.jpg" /> 36 </div> 37 </div> 38 <div class="box"> 39 <div class="pic"> 40 <img src="img/08.jpg" /> 41 </div> 42 </div> 43 <div class="box"> 44 <div class="pic"> 45 <img src="img/09.jpg" /> 46 </div> 47 </div> 48 <div class="box"> 49 <div class="pic"> 50 <img src="img/10.jpg" /> 51 </div> 52 </div> 53 <div class="box"> 54 <div class="pic"> 55 <img src="img/11.jpg" /> 56 </div> 57 </div> 58 <div class="box"> 59 <div class="pic"> 60 <img src="img/12.jpg" /> 61 </div> 62 </div> 63 <div class="box"> 64 <div class="pic"> 65 <img src="img/13.jpg" /> 66 </div> 67 </div> 68 <div class="box"> 69 <div class="pic"> 70 <img src="img/14.jpg" /> 71 </div> 72 </div> 73 <div class="box"> 74 <div class="pic"> 75 <img src="img/15.jpg" /> 76 </div> 77 </div> 78 <div class="box"> 79 <div class="pic"> 80 <img src="img/16.jpg" /> 81 </div> 82 </div> 83 <div class="box"> 84 <div class="pic"> 85 <img src="img/17.jpg" /> 86 </div> 87 </div> 88 <div class="box"> 89 <div class="pic"> 90 <img src="img/18.jpg" /> 91 </div> 92 </div> 93 <div class="box"> 94 <div class="pic"> 95 <img src="img/19.jpg" /> 96 </div> 97 </div> 98 <div class="box"> 99 <div class="pic"> 100 <img src="img/20.jpg" /> 101 </div> 102 </div> 103 <div class="box"> 104 <div class="pic"> 105 <img src="img/21.jpg" /> 106 </div> 107 </div> 108 <div class="box"> 109 <div class="pic"> 110 <img src="img/22.jpg" /> 111 </div> 112 </div> 113 <div class="box"> 114 <div class="pic"> 115 <img src="img/23.jpg" /> 116 </div> 117 </div> 118 <div class="box"> 119 <div class="pic"> 120 <img src="img/24.jpg" /> 121 </div> 122 </div> 123 <div class="box"> 124 <div class="pic"> 125 <img src="img/25.jpg" /> 126 </div> 127 </div> 128 <div class="box"> 129 <div class="pic"> 130 <img src="img/26.jpg" /> 131 </div> 132 </div> 133 <div class="box"> 134 <div class="pic"> 135 <img src="img/27.jpg" /> 136 </div> 137 </div> 138 <div class="box"> 139 <div class="pic"> 140 <img src="img/28.jpg" /> 141 </div> 142 </div> 143 <div class="box"> 144 <div class="pic"> 145 <img src="img/29.jpg" /> 146 </div> 147 </div> 148 <div class="box"> 149 <div class="pic"> 150 <img src="img/30.jpg" /> 151 </div> 152 </div> 153 </div> 154 </body>
CSS部分
1 *{ 2 margin: 0px; 3 padding: 0px; 4 } 5 6 #main{ 7 position:relative; 8 } 9 10 .box{ 11 padding: 15px 0 0 15px; 12 float: left; 13 } 14 15 .pic{ 16 padding: 10px; 17 border:1px solid #ccc ; 18 border-radius: 5px; 19 box-shadow: 0 0 5px #ccc; 20 } 21 22 .pic img{ 23 width: 165px; 24 height: auto; 25 }
JS部分
window.onload=function(){ waterfall('main','box'); // var dataInt={"data":[{"src":'01.jpg'},{"src":'02.jpg'},{"src":'03.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); // } } } } function waterfall(parent,box){ // 将main下的所有class为box的元素取出来 var oParent=document.getElementById(parent); var oBoxs=getByClass(oParent,box); //计算整个页面显示的列数（页面宽/box的宽） var oBoxW=oBoxs[0].offsetWidth; //offsetWidth 获取宽度 var cols=Math.floor(document.documentElement.clientWidth/oBoxW); //document.documentElement.clientWidth 获取浏览器宽度 //设置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); //数组中最小的值 Math.min只能求一组数中最小的值，不能求数组，所以借用apply 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; } } } //根据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'); //取出所有class为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; //}
