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>
以上所述就是本文的全部内容了，希望大家能够喜欢。