為了便于大家理解我使用了jQuery.當然用源生js代碼執行的效率會高一些，但是很多人多源生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>//www.49028c.com/</div></body></html>以上所述就是本文的全部內容了，希望大家能夠喜歡。
新聞熱點
疑難解答
