1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 html,body{ 12 width: 100%; 13 height: 100%; 14 15 } 16 #main{ 17 position: relative; /*所有的盒子相对他来定位 的*/ 18 width:1212px; 19 margin: 0 auto; 20 } 21 .box{ 22 padding:15px 0 0 15px; /* 要获取每列高度 = 图片和图片之间的距离*/ 23 float: left; /*块级元素水平排列*/ 24 } 25 .pic{ 26 padding: 10px; 27 border: 1px solid #CCCCCC; 28 border-radius: 5px; 29 box-shadow: 0 0 5px #CCCCCC; /*水平 垂直 阴影模糊程度 颜色*/ 30 } 31 .pic img{ 32 width:165px; 33 height: auto; 34 } 35 </style> 36 37 </head> 38 <body> 39 <div id="main"> 40 <div class="box"> 41 <div class="pic"> 42 <img src="images/0.jpg" /> 43 </div> 44 </div> 45 <div class="box"> 46 <div class="pic"> 47 <img src="images/1.jpg" /> 48 </div> 49 </div> 50 <div class="box"> 51 <div class="pic"> 52 <img src="images/2.jpg" /> 53 </div> 54 </div> 55 <div class="box"> 56 <div class="pic"> 57 <img src="images/3.jpg" /> 58 </div> 59 </div> 60 <div class="box"> 61 <div class="pic"> 62 <img src="images/4.jpg" /> 63 </div> 64 </div> 65 <div class="box"> 66 <div class="pic"> 67 <img src="images/5.jpg" /> 68 </div> 69 </div> 70 <div class="box"> 71 <div class="pic"> 72 <img src="images/6.jpg" /> 73 </div> 74 </div> 75 <div class="box"> 76 <div class="pic"> 77 <img src="images/7.jpg" /> 78 </div> 79 </div> 80 <div class="box"> 81 <div class="pic"> 82 <img src="images/8.jpg" /> 83 </div> 84 </div> 85 <div class="box"> 86 <div class="pic"> 87 <img src="images/9.jpg" /> 88 </div> 89 </div> 90 <div class="box"> 91 <div class="pic"> 92 <img src="images/10.jpg" /> 93 </div> 94 </div> 95 <div class="box"> 96 <div class="pic"> 97 <img src="images/19.jpg" /> 98 </div> 99 </div> 100 <div class="box"> 101 <div class="pic"> 102 <img src="images/11.jpg" /> 103 </div> 104 </div> 105 <div class="box"> 106 <div class="pic"> 107 <img src="images/12.jpg" /> 108 </div> 109 </div> 110 <div class="box"> 111 <div class="pic"> 112 <img src="images/13.jpg" /> 113 </div> 114 </div> 115 <div class="box"> 116 <div class="pic"> 117 <img src="images/14.jpg" /> 118 </div> 119 </div> 120 <div class="box"> 121 <div class="pic"> 122 <img src="images/15.jpg" /> 123 </div> 124 </div> 125 <div class="box"> 126 <div class="pic"> 127 <img src="images/16.jpg" /> 128 </div> 129 </div> 130 <div class="box"> 131 <div class="pic"> 132 <img src="images/17.jpg" /> 133 </div> 134 </div> 135 <div class="box"> 136 <div class="pic"> 137 <img src="images/18.jpg" /> 138 </div> 139 </div> 140 <div class="box"> 141 <div class="pic"> 142 <img src="images/20.jpg" /> 143 </div> 144 </div> 145 <div class="box"> 146 <div class="pic"> 147 <img src="images/21.jpg" /> 148 </div> 149 </div> 150 <div class="box"> 151 <div class="pic"> 152 <img src="images/22.jpg" /> 153 </div> 154 </div> 155 <div class="box"> 156 <div class="pic"> 157 <img src="images/23.jpg" /> 158 </div> 159 </div> 160 <div class="box"> 161 <div class="pic"> 162 <img src="images/24.jpg" /> 163 </div> 164 </div> 165 <div class="box"> 166 <div class="pic"> 167 <img src="images/25.jpg" /> 168 </div> 169 </div> 170 <div class="box"> 171 <div class="pic"> 172 <img src="images/26.jpg" /> 173 </div> 174 </div> 175 <div class="box"> 176 <div class="pic"> 177 <img src="images/27.jpg" /> 178 </div> 179 </div> 180 <div class="box"> 181 <div class="pic"> 182 <img src="images/28.jpg" /> 183 </div> 184 </div> 185 <div class="box"> 186 <div class="pic"> 187 <img src="images/29.jpg" /> 188 </div> 189 </div> 190 <div class="box"> 191 <div class="pic"> 192 <img src="images/30.jpg" /> 193 </div> 194 </div> 195 </div> 196 </body> 197 </html> 198 <script src="./common.js"></script> 199 <script> 200 window.onload = function(){ 201 var wf = new WaterFall() 202 wf.init().fnScroll(); 203 } 204 function WaterFall(){ 205 //实例属性 206 this.main = $id("main");//大容器 207 this.boxs = this.main.children;//所有图片 208 this.boxW = this.boxs[0].offsetWidth;//一个图片宽度 209 } 210 211 WaterFall.prototype = { 212 init : function(){ //入口 213 //定义一个数组 存放每列的高度值 214 this.hArr = []; 215 //遍历所有的box 将第一排中每一列的图片高度值存入到数组中 216 for( var i = 0 ; i < this.boxs.length ; i++ ){ 217 if( i < 6 ){ //前六张图片 218 this.hArr.push( this.boxs[i].offsetHeight ); 219 }else{ 220 //获取要定位的图片所在列的索引 也就是数组中最小值的下标 221 var index = this.getMinIndex(); 222 //定位后面所有的图片 223 this.boxs[i].style.position = "absolute"; 224 this.boxs[i].style.left = index*this.boxW +"px"; 225 this.boxs[i].style.top = this.hArr[index] + "px"; 226 227 //每定位好一张图片后 需要改变index所在数组位置中的数据 228 this.hArr[index] += this.boxs[i].offsetHeight; 229 } 230 } 231 console.log( this.hArr ); 232 return this; 233 }, 234 getMinIndex : function(){//获取数组最小值的索引 235 var min = Math.min.apply( null,this.hArr );//获取数组的最小值 236 return this.hArr.indexOf( min ); 237 }, 238 fnScroll : function(){//滚动条的操作 239 window.onscroll = function(){ 240 //获取最小高度 也就是获取数组的最小值 241 var minValue = Math.min.apply( null , this.hArr ); 242 var wHeight = window.innerHeight; 243 var sTop = document.documentElement.scrollTop || document.body.scrollTop; 244 var json = {"data" : [{"src":"1.jpg"},{"src":"3.jpg"},{"src":"5.jpg"},{"src":"9.jpg"}]}; 245 //当 可视区高度+页面滚走距离 > 最小值 开始加载数据 246 if( minValue < wHeight + sTop ){ 247 //开始加载数据 248 for( var i = 0 ; i < json.data.length ; i++ ){ 249 var item = json.data[i]; 250 var box = create("div"); 251 box.className = "box"; 252 var pic = create("div"); 253 pic.className = "pic"; 254 var img = create("img"); 255 img.src = "images/" + item.src; 256 pic.appendChild(img); 257 box.appendChild(pic); 258 this.main.appendChild( box ); 259 } 260 this.init(); 261 } 262 }.bind(this) 263 } 264 } 265 </script>
common.js文件:
//定义一个函数 功能是根据id查找页面元素 function $id( id ){ return document.getElementById( id ); } //创建元素 function create(ele){ return document.createElement(ele); } //获取任意区间的整数值 function rand( min , max ){ return Math.round( Math.random()*(max-min) + min ); } //随机获取六位十六进制颜色值 function getColor(){ var str = "0123456789abcdef"; var color = "#"; for( var i = 1 ; i <= 6 ; i++ ){ color += str.charAt( rand(0,15) ); } return color; } //自定义日期时间格式 function dateToString(now,sign){ //默认日期的间隔符为 - 如果用户传递的是/ 就使用/ . 如果用户不传递任何参数 默认是- sign = sign || "-"; var y = now.getFullYear(); var m = toTwo( now.getMonth()+ 1 ) ; var d = toTwo( now.getDate() ); var h = toTwo( now.getHours() ); var _m = toTwo( now.getMinutes() ); var s = toTwo( now.getSeconds() ) ; var str = y + sign + m + sign + d + " " + h + ":" + _m + ":" + s; return str; } //判断得到的结果是否小于10 如果小于10，前面拼接0 function toTwo(val){ return val < 10 ? "0"+val : val; } //验证码 ： 字母和数字组成 function yzm(){ //小写字母 大写字母 数字 //48--122 随机获取一个code值 判断编码值如果在 58--64 91--96 两个区间，就重新抽取 //如果不在上面的两个区间内，就将code转成字符， 拼接到字符串中 var str = "";//拼接6位的验证码 for( var i = 1 ; i <= 6 ; i++ ){ var code = rand( 48 , 122 ); if( code >= 58&&code <= 64 || code >= 91 && code <= 96 ){ //就重新抽一次 i--; }else{ var ch = String.fromCharCode( code ); str += ch; } } return str; } //碰撞函数 function pz(d1,d2){ R1 = d1.offsetWidth+d1.offsetLeft; L1 = d1.offsetLeft; T1 = d1.offsetTop; B1 = d1.offsetHeight + d1.offsetTop; R2 = d2.offsetWidth+d2.offsetLeft; L2 = d2.offsetLeft; T2 = d2.offsetTop; B2 = d2.offsetHeight + d2.offsetTop; //如果碰不上 返回false if( R1 < L2 || B1 < T2 || T1 > B2 || L1 > R2 ){ return false; }else{ return true; } }