<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="animate.min.css">
<style>
*{margin: 0;padding: 0;}
.box{width: 1200px;margin: 50px auto;background-color: #f2f2f2;}
img{width: 200px;height: 300px;margin: 10px;}
</style>
<script>
var arr = [
'animated flip',
'animated flipInX',
'animated flipInY',
'animated flipOutX',
'animated flipOutY',
'animated bounceOutUp',
'animated bounceOutRight',
'animated bounceOutLeft',
'animated bounceOutDown',
'animated bounceOut',
'animated fadeIn',
'animated fadeInDown',
'animated fadeInDownBig',
'animated fadeInLeft',
'animated fadeInLeftBig',
'animated fadeInRight',
'animated fadeInUpBig',
];
$(function(){
$('img').on('click', function(){
$('img').removeClass()
var rand = parseInt(Math.random()*16)
$(this).addClass(arr[rand])
})
})
</script>
</head>
<body>
<div class="box">
<img src="images/1.jpg" class="">
<img src="images/2.jpg" class="">
<img src="images/3.jpg" class="">
<img src="images/4.jpg" class="">
<img src="images/5.jpg" class="">
<img src="images/7.jpg" class="">
<img src="images/8.jpg" class="">
<img src="images/9.jpg" class="">
<img src="images/10.jpg" class="">
<img src="images/11.jpg" class="">
<img src="images/12.jpg" class="">
<img src="images/13.jpg" class="">
<img src="images/14.jpg" class="">
<img src="images/15.jpg" class="">
<img src="images/16.jpg" class="">
</div>
</body>
</html>
