php下載遠程大文件(獲取遠程文件大小)的實例
710
2024-01-10
本文實例講述了jQuery實現的瀑布流加載效果。分享給大家供大家參考,具體如下:
demo.js:
$(function(){ $('img').load(function(){ var box = $('.box'); var boxHeight = { leftBox:[], centerBox:[], rightBox:[] } for(var i=0;i<box.length;i++){ var now = i%3; //now的值為0,1,2 switch(now){ case 0: box.eq(i).css('left','10px'); boxHeight.leftBox.push(box.eq(i).height()); var now2 = Math.floor(i/3); if(now2==0){ box.eq(i).css('top',0); }else{ var total = 0; for(var j=0;j<now2;j++){ total += boxHeight.leftBox[j]+10; } box.eq(i).css('top',total+'px') } break; case 1: box.eq(i).css('left','270px'); boxHeight.centerBox.push(box.eq(i).height()); var now2 = Math.floor(i/3); if(now2==0){ box.eq(i).css('top',0); }else{ var total = 0; for(var j=0;j<now2;j++){ total += boxHeight.centerBox[j]+10; } box.eq(i).css('top',total+'px') } break; case 2: box.eq(i).css('left','530px'); boxHeight.rightBox.push(box.eq(i).height()); var now2 = Math.floor(i/3); if(now2==0){ box.eq(i).css('top',0); }else{ var total = 0; for(var j=0;j<now2;j++){ total += boxHeight.rightBox[j]+10; } box.eq(i).css('top',total+'px') } break; } } }); });
demo.html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>waterFall</title> <style> *{ padding: 0; margin: 0; } .wrap{ position: relative; } .box{ position: absolute; left: 0; top: 0; width: 250px; } .box img{ width: 250px; } </style> <script src="http://www.gimoo.net/t/1812/jquery.js"></script> <script src="http://www.gimoo.net/t/1812/demo.js"></script> </head> <body> <div class="wrap"> <div class="box"> <img src="http://www.gimoo.net/t/1812/1.jpg" alt=""> <p>1111111</p> </div> <div class="box"> <img src="http://www.gimoo.net/t/1812/2.jpg" alt=""> <p>22222222</p> </div> <div class="box"> <img src="http://www.gimoo.net/t/1812/3.jpg" alt=""> <p>33333333</p> </div> <div class="box"> <img src="http://www.gimoo.net/t/1812/4.jpg" alt=""> <p>4444444</p> </div> <div class="box"> <img src="http://www.gimoo.net/t/1812/5.jpg" alt=""> <p>55555555</p> </div> <div class="box"> <img src="http://www.gimoo.net/t/1812/6.jpg" alt=""> <p>666666666666</p> </div> <div class="box"> <img src="http://www.gimoo.net/t/1812/7.jpg" alt=""> <p>77777777</p> </div> <div class="box"> <img src="http://www.gimoo.net/t/1812/8.jpg" alt=""> <p>888888888888888</p> </div> <div class="box"> <img src="http://www.gimoo.net/t/1812/9.jpg" alt=""> <p>99999999999999</p> </div> </div> </body> </html>
效果圖如下:
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!