照片墙效果学习总结
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="static/style6.css">
<link rel="stylesheet" type="text/css" href="static/animate.min.css">
<script type="text/javascript" src="static/jquery-3.3.1.js"></script>
</head>
<body>
<div class="box">
<img src="static/images/zly/1.jpg" />
<img src="static/images/zly/2.jpg" />
<img src="static/images/zly/3.jpg" />
<img src="static/images/zly/4.jpg" />
<img src="static/images/zly/5.jpg" />
<img src="static/images/zly/6.jpg" />
<img src="static/images/zly/7.jpg" />
<img src="static/images/zly/8.jpg" />
<img src="static/images/zly/9.jpg" />
<img src="static/images/zly/10.jpg" />
</div>
</body>
<script type="text/javascript">
var arr=['bounce','bounceOutDown','bounceOutLeft','bounceOutRight','fadeOut','fadeOutDown','fadeOutLeftBig','fadeOutRight','rotateOutUpRight','bounce','rubberBand']
$('img').on('click',function(){
$('img').removeClass()
//随机生成一个新的class
var rand = parseInt(Math.random()*10)
$(this).addClass('animated '+arr[rand])
setTimeout(function(){
$('img').removeClass('animated '+arr[rand]);
}, 1000);
})
</script>
</html>*{margin: 0px;padding: 0px;}
.box{width: 1500px;margin: 30px auto;}
img{width: 250px;height: 310px; margin: 5px;animate-duration: 2s;}拿来就用，方法很简单，根据教程加了个定时器，解决效果实现后，图片不显示
