萬盛學電腦網 >> 腳本專題 >> javascript >> jquery代碼實現簡單的隨機圖片瀑布流效果
jquery代碼實現簡單的隨機圖片瀑布流效果
jquery代碼實現簡單的隨機圖片瀑布流效果
瀑布流布局最近真的很流行，很多人都跟我一樣想知道是怎麼做出來的吧，經過網上搜索大量的參考結合N邊的實驗今天終於被我寫出來了,這裡分享給大家，有需要的小伙伴參考下吧。
為了便於大家理解我使用了jQuery.當然用源生js代碼執行的效率會高一些，但是很多人多源生js不是很熟練
代碼：
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 <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.jb51.net/</div> </body> </html>以上所述就是本文的全部內容了，希望大家能夠喜歡。
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved