jquery代碼實(shí)現(xiàn)簡(jiǎn)單的隨機(jī)圖片瀑布流效果
為了便于大家理解我使用了jQuery.當(dāng)然用源生js代碼執(zhí)行的效率會(huì)高一些,但是很多人多源生js不是很熟練
代碼:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery隨機(jī)圖片瀑布流無(wú)限加載</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++){//每次加載時(shí)模擬隨機(jī)加載圖片 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()){ //當(dāng)最短的ul的高度比窗口滾出去的高度+瀏覽器高度大時(shí)加載新圖片 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>
以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。
- 用JS生成UUID的方法實(shí)例
- Javascript生成全局唯一標(biāo)識(shí)符(GUID,UUID)的方法
- jQuery基于隨機(jī)數(shù)解決中午吃什么去哪吃問(wèn)題示例
- jQuery實(shí)現(xiàn)的點(diǎn)贊隨機(jī)數(shù)字顯示動(dòng)畫(huà)效果(附在線演示與demo源碼下載)
- jQuery實(shí)現(xiàn)轉(zhuǎn)動(dòng)隨機(jī)數(shù)抽獎(jiǎng)效果的方法
- js jquery獲取隨機(jī)生成id的服務(wù)器控件的三種方法
- jquery輸入數(shù)字隨機(jī)抽獎(jiǎng)特效的簡(jiǎn)單實(shí)現(xiàn)代碼
- jQuery隨機(jī)密碼生成的方法
- jQuery 插件實(shí)現(xiàn)隨機(jī)自由彈跳氣泡樣式
- 基于JQuery及AJAX實(shí)現(xiàn)名人名言隨機(jī)生成器
- JS實(shí)現(xiàn)點(diǎn)擊生成UUID的方法完整實(shí)例【基于jQuery】
相關(guān)文章
jQuery實(shí)現(xiàn)跨域iframe接口方法調(diào)用
頁(yè)面a.html域名為www.a.com嵌入頁(yè)面http://www.b.com/b.html,b.html要調(diào)用a.html中的js函數(shù),由于兩個(gè)頁(yè)面不在一個(gè)域中,會(huì)提示沒(méi)權(quán)限。如何解決該問(wèn)題呢,請(qǐng)看下面示例代碼。2015-03-03基于jquery的loading效果實(shí)現(xiàn)代碼
基于jquery的loading效果實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-11-11jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動(dòng)切換效果
這篇文章主要介紹了jQuery插件Flexslider實(shí)現(xiàn)圖片輪播、圖文結(jié)合滑動(dòng)切換效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07jquery.simple.tree插件 更簡(jiǎn)單,兼容性更好的無(wú)限樹(shù)插件
在這里介紹一款小巧,功能強(qiáng)大,能拖拽,支持異步,且兼容性更高的jquery Tree插件2010-09-09Jquery和BigFileUpload實(shí)現(xiàn)大文件上傳及進(jìn)度條顯示
這篇文章主要介紹了Jquery和BigFileUpload實(shí)現(xiàn)大文件上傳及進(jìn)度條顯示的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06