jquery代码实现简单的随机图片瀑布流效果
为了便于大家理解我使用了jQuery.当然用源生js代码执行的效率会高一些,但是很多人多源生js不是很熟练
代码:
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery随机图片瀑布流无限加载</title> <styletype="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:50pxauto;} #containerul{width:300px;list-style:none;float:left;margin-right:20px;} #containerulli{margin-bottom:20px;} #containerulliimg{width:300px;} </style> </head> <body> <divid="container"> <ulclass="col"> <li><imgsrc="201405/-1.jpg"alt=""/></li> <li><imgsrc="201405/-2.jpg"alt=""/></li> <li><imgsrc="201405/-3.jpg"alt=""/></li> </ul> <ulclass="col"></ul> <ulclass="col"style="margin-right:0"></ul> </div> <scripttype="text/javascript"src="/ajaxjs/jquery-1.9.1.min.js"></script> <scripttype="text/javascript"> $(function(){ functionloadMeinv(){ vardata=0; for(vari=0;i<9;i++){//每次加载时模拟随机加载图片 data=parseInt(Math.random()*9); varhtml=""; html='<li><imgsrc=/-' +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(); } }) functiongetMinUl(){//每次获取最短的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> <divstyle="text-align:center;margin:50px0;font:normal14px/24px'MicroSoftYaHei';"> </div> <div>https://www.nhooo.com/</div> </body> </html>
以上所述就是本文的全部内容了,希望大家能够喜欢。