瀑布流布局最近真的很流行，很多人都跟我一样想知道是怎么做出来的吧，经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,这里分享给大家，有需要的小伙伴参考下吧。
为了便于大家理解我使用了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> <ul> <li><img src="https://www.jb51.net/201405/-1.jpg" alt=""/></li> <li><img src="https://www.jb51.net/201405/-2.jpg" alt=""/></li> <li><img src="https://www.jb51.net/201405/-3.jpg" alt=""/></li> </ul> <ul></ul> <ul></ul> </div> <script type="text/javascript" src="https://www.jb51.net/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> </div> <div>https://www.jb51.net/</div> </body> </html>
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章: