jquery随机瀑布流简单代码实例
分类：实例代码
本章节分享一段代码实例，它实现了简单的随机瀑布流效果。
需要的朋友可以做一下分析。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>前端教程网</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>
<script src="/wp-content/uploads/front-end-tutorial/error.html><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>
</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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div>
<div>http://www.pipipi.net/</div>
</body>
</html>
jquery随机瀑布流简单代码实例，这样的场景在实际项目中还是用的比较多的，关于jquery随机瀑布流简单代码实例就介绍到这了。
jquery随机瀑布流简单代码实例属于前端实例代码，有关更多实例代码大家可以查看。