jquery随机图片瀑布流无限加载代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery随机图片瀑布流无限加载代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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="img/1.jpg" alt=""/></li>
		<li><img src="img/2.jpg" alt=""/></li>
		<li><img src="img/3.jpg" alt=""/></li>
	</ul>
	<ul class="col"></ul>
	<ul class="col" style="margin-right:0"></ul>
	
</div>

<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
	//url data function dataType
	function loadMeinv(){
		var data = 0;
		for(var i=0;i<9;i++){//每次加载时模拟随机加载图片
			data = parseInt(Math.random()*9);
			var html = "";
			html = '<li><img src = img/'
					+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>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)