小试牛刀-JS瀑布流

五块五卖你了 · 发表于 2012-12-22 21:31:39

View Code <div id="cnblogs_code_open_644c185b-2a47-4ef7-8890-12db096ccf5b" class="cnblogs_code_hide"> 1 <html> 2 <head> 3 <meta charset="gb2312"> 4 <title>Pinterest/瀑布流布局</title> 5 <style> 6 .waterfall{position:relative; margin:0 auto;} 7 .waterfall .item{width:210px; display:none} 8 .waterfall .item:hover{opacity: 0.9} 9 .loading{text-align:center; padding:20px 0 120px; } 10 </style> 11 </head> 12 <body> 13 <a href="javascript:void(null)" onClick="blank()">open</a> 14 <h1>Pinterest/瀑布流布局</h1> 15 <ul> 16 <li>加载页面，动态数据块，透明度为0, 对已有元素进行定位</li> 17 <li>问个瀑布流中的滚动加载数据问题？页面高度(scrollHeight)- 浏览器视口高度(offsetHeight) + 浏览器滚动高度(scrollTop)</li> 18 <li>鼠标滚动到最短一列的底部时加载数据</li> 19 </ul> 20 <h2>document clientWidth:</h2> 21 <script> 22 document.write(document.body.clientWidth + "<br>" + document.documentElement.clientWidth); 23 var data = ' <div class="item"> \ 24 <img src="http://pic4.xihuan.me/dr/192_287_90/t02e9a2932e981c0892.jpg" width="191" height="287"> \ 25 </div>\ 26 \ 27 <div class="item"> \ 28 <img src="http://pic2.xihuan.me/dr/192_288_90/t023a00b8fd90f13bf6.jpg" width="191" height="288">\ 29 </div>\ 30 \ 31 <div class="item">\ 32 <img src="http://pic2.xihuan.me/dr/192_128_90/t0261c1649fa0049796.jpg" width="192" height="128">\ 33 </div>\ 34 \ 35 <div class="item"> \ 36 <img src="http://pic2.xihuan.me/dr/192_136_90/t02f6128c27a03ba1b4.jpg" width="192" height="136"> \ 37 </div>\ 38 \ 39 <div class="item"> \ 40 <img src="http://pic3.xihuan.me/dr/192_288_90/t02999b00e78b0305fe.jpg" width="192" height="288">\ 41 </div>\ 42 \ 43 <div class="item">\ 44 <img src="http://pic1.xihuan.me/dr/192_267_90/t0285ead0935b33176e.jpg" width="191" height="267">\ 45 </div>\ 46 \ 47 <div class="item"> \ 48 <img src="http://pic3.xihuan.me/dr/192_144_90/t02fa12b10de9a6d67a.jpg" width="192" height="144">\ 49 </div>\ 50 \ 51 <div class="item" > \ 52 <img src="http://pic4.xihuan.me/dr/192_192_90/t025e949d4862320f73.jpg" width="192" height="192"> \ 53 </div>\ 54 \ 55 <div class="item">\ 56 <img src="http://pic0.xihuan.me/dr/192_266_90/t02b313f975b4fe3068.jpg" width="192" height="266">\ 57 </div>\ 58 \ 59 <div class="item" > \ 60 <img src="http://pic0.xihuan.me/dr/192_302_90/t0214baf4ab88314b2b.jpg" width="192" height="302">\ 61 </div>\ 62 \ 63 <div class="item">\ 64 <img src="http://pic2.xihuan.me/dr/192_256_90/t020b4d6b44ee7f086d.jpg" width="192" height="256">\ 65 </div>\ 66 \ 67 <div class="item"> \ 68 <img src="http://pic4.xihuan.me/dr/192_288_90/t024968e7e08f88a459.jpg" width="192" height="288"> \ 69 </div>\ 70 \ 71 <div class="item">\ 72 <img width="191" height="251" src="http://pic0.xihuan.me/dr/192_251_90/t02af8a0a7824408fcc.jpg">\ 73 </div>\ 74 \ 75 <div class="item">\ 76 <img width="192" height="192" src="http://pic0.xihuan.me/dr/192_192_90/t02664c86dbada6a50e.jpg"> \ 77 </div>\ 78 \ 79 <div class="item"> \ 80 <img width="192" height="152" src="http://pic0.xihuan.me/dr/192_152_90/t02c218bfbdd123c42b.jpg"> \ 81 </div>\ 82 \ 83 <div class="item"> \ 84 <img width="191" height="241" src="http://pic3.xihuan.me/dr/192_241_90/t026c1546d982d42d38.jpg">\ 85 </div>\ 86 \ 87 <div class="item">\ 88 <img width="191" height="288" src="http://pic3.xihuan.me/dr/192_288_90/t0238004c02f31c6c0c.jpg">\ 89 </div>\ 90 \ 91 <div class="item" > \ 92 <img width="191" height="427" src="http://pic2.xihuan.me/dr/192_427_90/t023f32089c91e6d53d.jpg"> \ 93 </div>\ 94 \ 95 <div class="item" >\ 96 <img height="176" width="192" src="http://pic4.xihuan.me/dr/192_176_90/t02b7c4366b32e0335d.jpg">\ 97 </div>'; 98 </script> 99 <h2> document.documentElement.clientWidth</h2>100 <p> document.body.clientWidth body 元素宽度<br>101 document.documentElement.clientWidth html元素宽度102 </p>103 <h2>htmlElement.chidren</h2>104 <p>105 使用htmlElement.chidren属性可以只返回&ldquo;htmlElement&rdquo;的元素类型子节点，不过IE中还会返回注释节点。htmlElement.childNodes 属性在非IE中除了返回元素类型子节点外，还返回注释和文本类型的子节点。要在childNodes里获取html元素节点，一般通过遍历然后比较nodeType 进行过滤。106 <br>107 108 每次 waterfall.appendChild(htmlElement.chidren); htmlElement.chidren 里的元素个数减一，后面的元素自动向前移。109 </p>110 111 <div class="wrap">112 <div id="Waterfall" class="waterfall">113 <div class="item">114 <img src="http://pic4.xihuan.me/dr/192_287_90/t02e9a2932e981c0892.jpg" width="191" height="287">115 </div>116 117 <div class="item">118 <img src="http://pic2.xihuan.me/dr/192_288_90/t023a00b8fd90f13bf6.jpg" width="191" height="288">119 </div>120 121 <div class="item">122 <img src="http://pic2.xihuan.me/dr/192_128_90/t0261c1649fa0049796.jpg" width="192" height="128">123 </div>124 125 <div class="item">126 <img src="http://pic2.xihuan.me/dr/192_136_90/t02f6128c27a03ba1b4.jpg" width="192" height="136">127 </div>128 129 <div class="item">130 <img src="http://pic3.xihuan.me/dr/192_288_90/t02999b00e78b0305fe.jpg" width="192" height="288">131 </div>132 133 <div class="item">134 <img src="http://pic1.xihuan.me/dr/192_267_90/t0285ead0935b33176e.jpg" width="191" height="267">135 </div>136 137 <div class="item">138 <img src="http://pic3.xihuan.me/dr/192_144_90/t02fa12b10de9a6d67a.jpg" width="192" height="144">139 </div>140 141 <div class="item" >142 <img src="http://pic4.xihuan.me/dr/192_192_90/t025e949d4862320f73.jpg" width="192" height="192">143 </div>144 145 <div class="item">146 <img src="http://pic0.xihuan.me/dr/192_266_90/t02b313f975b4fe3068.jpg" width="192" height="266">147 </div>148 149 <div class="item" >150 <img src="http://pic0.xihuan.me/dr/192_302_90/t0214baf4ab88314b2b.jpg" width="192" height="302">151 </div>152 153 <div class="item">154 <img src="http://pic2.xihuan.me/dr/192_256_90/t020b4d6b44ee7f086d.jpg" width="192" height="256">155 </div>156 157 <div class="item">158 <img src="http://pic4.xihuan.me/dr/192_288_90/t024968e7e08f88a459.jpg" width="192" height="288">159 </div>160 161 <div class="item">162 <img width="191" height="251" src="http://pic0.xihuan.me/dr/192_251_90/t02af8a0a7824408fcc.jpg">163 </div>164 165 <div class="item">166 <img width="192" height="192" src="http://pic0.xihuan.me/dr/192_192_90/t02664c86dbada6a50e.jpg">167 </div>168 169 <div class="item">170 <img width="192" height="152" src="http://pic0.xihuan.me/dr/192_152_90/t02c218bfbdd123c42b.jpg">171 </div>172 173 <div class="item">174 <img width="191" height="241" src="http://pic3.xihuan.me/dr/192_241_90/t026c1546d982d42d38.jpg">175 </div>176 177 <div class="item">178 <img width="191" height="288" src="http://pic3.xihuan.me/dr/192_288_90/t0238004c02f31c6c0c.jpg">179 </div>180 181 <div class="item" >182 <img width="191" height="427" src="http://pic2.xihuan.me/dr/192_427_90/t023f32089c91e6d53d.jpg">183 </div>184 185 <div class="item" >186 <img height="176" width="192" src="http://pic4.xihuan.me/dr/192_176_90/t02b7c4366b32e0335d.jpg">187 </div>188 189 </div>190 <div class="loading" id="loading">正在加载&hellip;&hellip;</div>191 </div>192 <script>193 var tool = {194 //此方法为了避免在 ms 段时间内，多次执行func。常用 resize、scoll、mousemove等连续性事件中195 buffer: function(func, ms, context){196 var buffer;197 return function(){198 if(buffer) return;199 200 buffer = setTimeout(function(){201 func.call(this)202 buffer = undefined;203 },ms);204 };205 },206 207 /*读取或设置元素的透明度*/208 opacity: function(elem, val){209 var setting = arguments.length > 1;210 if("opacity" in elem.style){//elem.style["opacity"] 读取不到CSS class中的值211 return setting ? elem.style["opacity"] = val : elem.style["opacity"];212 }else{213 if(elem.filters && elem.filters.alpha) {214 return setting ? elem.filters.alpha["opacity"] = val*100 : elem.filters.alpha["opacity"]/100;215 }216 }217 },218 219 //获取或设置文档对象的scrollTop220 //function([val])221 documentScrollTop: function(val){222 var elem = document;223 return (val!== undefined) ?224 elem.documentElement.scrollTop = elem.body.scrollTop = val :225 Math.max(elem.documentElement.scrollTop, elem.body.scrollTop);226 227 },228 229 //function (elem) 获取elem在页面中的坐标230 //return {top:xxx,left:xxx}231 offset: function (elem){232 var top , left;233 if(!(elem && elem.offsetTop)) return null;234 235 top = elem.offsetTop;236 left = elem.offsetLeft;237 while(elem = elem.offsetParent){238 239 top += elem.offsetTop;240 left += elem.offsetLeft;241 }242 243 return {top:top, left:left};244 },245 246 get: function(id){247 return document.getElementById(id);248 },249 250 addEventListener: function(elem, type, handel){251 if(elem.addEventListener){252 elem.addEventListener(type, handel, false);253 }else {254 elem.attachEvent("on"+type, function(){255 handel.call(elem, window.event);256 });257 }258 }259 };260 261 function wrap(elem){262 return new DomWrap(elem);263 }264 265 function DomWrap(elem){266 this.core = tool;267 this.dom = elem;268 }269 270 DomWrap.prototype={271 on: function(type, handel){272 this.core.addEventListener(this.dom, type, handel);273 }274 };275 276 //Waterfall277 (function(ns, dom){//dom:DomWrap278 //静态私有成员279 var viewportHeight = document.documentElement.clientHeight;280 var minHeight = 0;281 var columnCount = 5;282 var columnWidth= 210;283 var cloumns = [];284 var waterfall = "";285 var staticElems = [];286 var baseTop = 0;287 288 //初始化289 function init(container){290 waterfall = tool.get(container);291 staticElems = waterfall.children;292 baseTop = tool.offset(waterfall).top;293 for(var i=0; i< columnCount; i ++){294 cloumns = {index:i, height:0};295 }296 297 waterfall.style.width = (columnWidth*columnCount)+"px";298 dom(window).on("scroll",tool.buffer(onscroll,500));299 position(staticElems);300 }301 302 //设置元素位置303 function position(elems, append){304 var left, top, cssText;305 var appedElem = null;306 var sortedCloumns = [];307 for(var i=0, n= elems.length; i< n;) {308 if(!(elems && elems.nodeType ===1)) continue;309 cloumns.sort(function(x,y){return x.height - y.height});310 index = cloumns[0].index;311 left = index * columnWidth312 top = cloumns[0].height;313 cssText = "display:block; position:absolute; left:" + left + "px; top:" + top + "px";314 elems.style.cssText = cssText; 315 if(append){316 apendItem = elems;317 waterfall.appendChild(apendItem); 318 cloumns[0].height += apendItem.offsetHeight;319 n--;320 321 } else {322 cloumns[0].height += elems.offsetHeight;323 i++;324 }325 }326 327 cloumns.sort(function(x,y){return x.height - y.height});328 minHeight = cloumns[0].height;329 waterfall.style.height = cloumns[cloumns.length-1].height + "px";330 }331 332 function appendItem(){333 var fragment = document.createElement("div");334 fragment.innerHTML = data;335 position(fragment.children,true);336 }337 338 function onscroll(){339 var scrollTop = tool.documentScrollTop(); 340 if(scrollTop + viewportHeight > baseTop + minHeight ) {341 //console.log("loading");342 appendItem();343 } 344 }345 346 ns.watferfall = init;347 }( window, wrap));348 watferfall("Waterfall");349 </script>350 </body>351 </html>

		自动登录	找回密码
密码			立即注册