jquery代碼實現(xiàn)簡單的隨機圖片瀑布流效果
更新時間:2015年04月20日 10:59:00 投稿:hebedich
瀑布流布局最近真的很流行,很多人都跟我一樣想知道是怎么做出來的吧,經(jīng)過網(wǎng)上搜索大量的參考結(jié)合N邊的實驗今天終于被我寫出來了,這里分享給大家,有需要的小伙伴參考下吧。
為了便于大家理解我使用了jQuery.當然用源生js代碼執(zhí)行的效率會高一些,但是很多人多源生js不是很熟練
代碼:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery隨機圖片瀑布流無限加載</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";} /* container */ #container{width:940px;margin:50px auto;} #container ul{width:300px;list-style:none;float:left;margin-right:20px;} #container ul li{margin-bottom:20px;} #container ul li img{width:300px;} </style> </head> <body> <div id="container"> <ul class="col"> <li><img src="201405/-1.jpg" alt=""/></li> <li><img src="201405/-2.jpg" alt=""/></li> <li><img src="201405/-3.jpg" alt=""/></li> </ul> <ul class="col"></ul> <ul class="col" style="margin-right:0"></ul> </div> <script type="text/javascript" src="/ajaxjs/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ function loadMeinv(){ var data = 0; for(var i=0;i<9;i++){//每次加載時模擬隨機加載圖片 data = parseInt(Math.random()*9); var html = ""; html = '<li><img src = /-' +data+'.jpg><p>src=' +data+'.jpg</p></li>'; $minUl = getMinUl(); $minUl.append(html); } } loadMeinv(); $(window).on("scroll",function(){ $minUl = getMinUl(); if($minUl.height() <= $(window).scrollTop()+$(window).height()){ //當最短的ul的高度比窗口滾出去的高度+瀏覽器高度大時加載新圖片 loadMeinv(); } }) function getMinUl(){//每次獲取最短的ul,將圖片放到其后 var $arrUl = $("#container .col"); var $minUl =$arrUl.eq(0); $arrUl.each(function(index,elem){ if($(elem).height()<$minUl.height()){ $minUl = $(elem); } }); return $minUl; } }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> <div>http://www.dbjr.com.cn/</div> </body> </html>
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
您可能感興趣的文章:
- 用JS生成UUID的方法實例
- Javascript生成全局唯一標識符(GUID,UUID)的方法
- jQuery基于隨機數(shù)解決中午吃什么去哪吃問題示例
- jQuery實現(xiàn)的點贊隨機數(shù)字顯示動畫效果(附在線演示與demo源碼下載)
- jQuery實現(xiàn)轉(zhuǎn)動隨機數(shù)抽獎效果的方法
- js jquery獲取隨機生成id的服務(wù)器控件的三種方法
- jquery輸入數(shù)字隨機抽獎特效的簡單實現(xiàn)代碼
- jQuery隨機密碼生成的方法
- jQuery 插件實現(xiàn)隨機自由彈跳氣泡樣式
- 基于JQuery及AJAX實現(xiàn)名人名言隨機生成器
- JS實現(xiàn)點擊生成UUID的方法完整實例【基于jQuery】
相關(guān)文章
jQuery實現(xiàn)跨域iframe接口方法調(diào)用
頁面a.html域名為www.a.com嵌入頁面http://www.b.com/b.html,b.html要調(diào)用a.html中的js函數(shù),由于兩個頁面不在一個域中,會提示沒權(quán)限。如何解決該問題呢,請看下面示例代碼。2015-03-03jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果
這篇文章主要介紹了jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-07-07jquery.simple.tree插件 更簡單,兼容性更好的無限樹插件
在這里介紹一款小巧,功能強大,能拖拽,支持異步,且兼容性更高的jquery Tree插件2010-09-09Jquery和BigFileUpload實現(xiàn)大文件上傳及進度條顯示
這篇文章主要介紹了Jquery和BigFileUpload實現(xiàn)大文件上傳及進度條顯示的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06