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>
面向对象之瀑布流效果
猜你喜欢
转载自www.cnblogs.com/Leslie-Cheung1584304774/p/10516247.html
今日推荐
周排行