jQuery實(shí)現(xiàn)的瀑布流加載效果示例
本文實(shí)例講述了jQuery實(shí)現(xiàn)的瀑布流加載效果。分享給大家供大家參考,具體如下:
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="jquery.js"></script> <script src="demo.js"></script> </head> <body> <div class="wrap"> <div class="box"> <img src="1.jpg" alt=""> <p>1111111</p> </div> <div class="box"> <img src="2.jpg" alt=""> <p>22222222</p> </div> <div class="box"> <img src="3.jpg" alt=""> <p>33333333</p> </div> <div class="box"> <img src="4.jpg" alt=""> <p>4444444</p> </div> <div class="box"> <img src="5.jpg" alt=""> <p>55555555</p> </div> <div class="box"> <img src="6.jpg" alt=""> <p>666666666666</p> </div> <div class="box"> <img src="7.jpg" alt=""> <p>77777777</p> </div> <div class="box"> <img src="8.jpg" alt=""> <p>888888888888888</p> </div> <div class="box"> <img src="9.jpg" alt=""> <p>99999999999999</p> </div> </div> </body> </html>
效果圖如下:
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jQuery瀑布流插件Wookmark使用實(shí)例
- jQuery Masonry瀑布流插件使用詳解
- jquery簡(jiǎn)單瀑布流實(shí)現(xiàn)原理及ie8下測(cè)試代碼
- jQuery.lazyload+masonry改良圖片瀑布流代碼
- jQuery實(shí)現(xiàn)瀑布流布局
- jQuery實(shí)現(xiàn)瀑布流布局詳解(PC和移動(dòng)端)
- jQuery+HTML5美女瀑布流布局實(shí)現(xiàn)方法
- jQuery向下滾動(dòng)即時(shí)加載內(nèi)容實(shí)現(xiàn)的瀑布流效果
- PHP結(jié)合Jquery和ajax實(shí)現(xiàn)瀑布流特效
- Jquery實(shí)現(xiàn)瀑布流布局(備有詳細(xì)注釋)
- 深入探秘jquery瀑布流的實(shí)現(xiàn)
相關(guān)文章
Jquery實(shí)現(xiàn)圖片放大鏡效果的思路及代碼(自寫)
放大鏡類的文章網(wǎng)上有很多,由于實(shí)現(xiàn)起來比較麻煩,所以自己寫了一個(gè),下面為大家分享下具體的算法及實(shí)現(xiàn)代碼,感興趣的朋友可以參考下2013-10-10jQuery給指定的table動(dòng)態(tài)添加刪除行的操作方法
今天在項(xiàng)目中,剛好用到給指定的table添加一行、刪除一行。添加一行,支持在任意行添加一行且可配置的,刪除一行支持動(dòng)態(tài)刪除一行。本文給大家介紹的非常詳細(xì),一起看看吧2016-10-10基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能
這篇文章主要介紹了基于Jquery插件實(shí)現(xiàn)跨域異步上傳文件功能的相關(guān)資料,需要的朋友可以參考下2016-04-04Bootstrap中點(diǎn)擊按鈕后變灰并顯示加載中實(shí)例代碼
Bootstrap插件非常的好用了,今天小編通過本教程給大家介紹Bootstrap中點(diǎn)擊按鈕后變灰并顯示加載中實(shí)例代碼,非常不錯(cuò),感興趣的朋友一起看看吧2016-09-09jQuery代碼實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能
對(duì)于一個(gè)表格,為了更好的用戶體驗(yàn)度,需要把選中的表格項(xiàng)添加高亮,下面小編給大家介紹使用jquery實(shí)現(xiàn)表格中點(diǎn)擊相應(yīng)行變色功能的實(shí)例代碼,需要的朋友參考下2016-05-05jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法
這篇文章主要介紹了jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法,可實(shí)現(xiàn)類似淘寶首頁(yè)縱向菜單的顯示效果,涉及jQuery鼠標(biāo)響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12