为了便于大家理解我使用了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.jb51.net/</div> </body> </html>
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
- 用JS生成UUID的方法实例
- Javascript生成全局唯一标识符（GUID,UUID）的方法
- jQuery基于随机数解决中午吃什么去哪吃问题示例
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- jQuery实现转动随机数抽奖效果的方法
- js jquery获取随机生成id的服务器控件的三种方法
- jquery输入数字随机抽奖特效的简单实现代码
- jQuery随机密码生成的方法
- jQuery 插件实现随机自由弹跳气泡样式
- 基于JQuery及AJAX实现名人名言随机生成器
- JS实现点击生成UUID的方法完整实例【基于jQuery】
