為了便于大家理解我使用了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>//m.survivalescaperooms.com/</div></body></html>以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
