jQuery点击添加更多图片瀑布流代码

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

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

以下是 jQuery点击添加更多图片瀑布流代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery点击添加更多图片瀑布流代码</title>

<!--可无视-->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">

<!--必要样式-->
<link rel="stylesheet" href="css/style.css" type="text/css" />  

<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

</head>
<body>

<div class="htmleaf-content bgcolor-3">
	<h3 class="center">点击任意地方添加2张图片 </h3>
	<div class="container">
		<div class="container_inner">
			<div class="item"><img src="images/1.jpg" alt=""></div>
			<div class="item"><img src="images/2.jpg" alt=""></div>
			<div class="item"><img src="images/3.jpg" alt=""></div>
			<div class="item"><img src="images/4.jpg" alt=""></div>
			<div class="item"><img src="images/5.jpg" alt=""></div>
			<div class="item"><img src="images/6.jpg" alt=""></div>
		</div>
		<p class="load">Fetching images</p>
	</div>
</div>
<script type="text/javascript" src='js/jquery.min.js'></script>       
<script type="text/javascript" src='js/imagesloaded.pkgd.min.js'></script>       
<script type="text/javascript" src='js/fluid.jquery.js'></script>       
<script type="text/javascript" src='js/main.js'></script>
</body>
</html>

JS代码(main.js):

var fluid,$item;
	imagesLoaded($('.container_inner'),function(){
	$('.load').css('display','none');
	fluid = new $('.container_inner').fluid({
	col:6,spacingX:20,spacingY:20}
);
}
);
	$(document).click(function(){
	$items = [$('<div class="item"> <img src="images/'+ Math.floor(gRA(1,6)) +'.jpg" alt=""> </div>'),$('<div class="item"> <img src="images/'+ Math.floor(gRA(1,6)) +'.jpg" alt=""> </div>')];
	imagesLoaded( $items,function(){
	fluid.add($items);
}
);
}
);
	function gRA(min,max){
	return Math.random() * (max - min) + min;
}

CSS代码(style.css):

/* some reset */
*{margin:0;padding:0;box-sizing:border-box;}
img{max-width:100%;max-height:100%;}
/*~~[end]~~*/
/* css */
/*body{background:#080F18;padding:20px 0;}
*/
.container{width:800px;margin:20px auto;background:#334864;padding:10px;}
.container_inner{position:relative;}
.item{position:absolute;background:#fff;border:10px solid #fff;display:none;}
.item img{width:100%;display:block;}
.load,.title{text-align:center;color:#fff;font-family:Arial,sans-serif;}
/*~~[end]~~*/

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