照片墙代码
2019-03-27 本文已影响2人
wppeng
html
<div id="datalist" class="container">
</div>
css
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
background-color: #ddeaf0;
}
.container {
width: 90%;
height: 90%;
position: relative;
background-color: #ddeaf0;
}
.container img {
width: 268px;
height: auto;
padding: 10px;
background: white;
border: 1px solid #ddd;
box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
}
.container img:hover {
box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);
-webkit-transform: rotate(0deg) scale(1.60);
-moz-transform: rotate(0deg) scale(1.60);
transform: rotate(0deg) scale(1.60);
z-index: 2;
}
.pic{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
js
var clientWidth= document.body.clientWidth;
var clientHeight=document.body.clientHeight;
//console.log('浏览器高'+clientHeight);
//console.log('浏览器宽'+clientWidth);
var maxNumber=0;
if(clientHeight>clientWidth){
maxNumber=clientWidth;
}else{
maxNumber=clientHeight;
}
maxNumber=Math.floor(maxNumber/2);
var a=[1,maxNumber];
//console.log(a);
var data=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg','image/5.jpg'];
//console.log(randomNumber(...a));
var htmlShow='';
var htmllist=[];
for(var index in data){
console.log(data[index]);
htmllist.push('<img class="pic" style="top:'+randomNumber(...a)+'px;bottom:'+randomNumber(...a)+'px;left:'+randomNumber(...a)+'px;right:'+randomNumber(...a)+'px;" src="'+data[index]+'">')
}
htmlShow=htmllist.join('');
//htmlShow='';
document.getElementById('datalist').innerHTML=htmlShow;
/**
* min:随机数下限
* max:随机数上限
*/
function randomNumber(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
整个页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta charset="utf-8">
<title>照片墙</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
background-color: #ddeaf0;
}
.container {
width: 90%;
height: 90%;
position: relative;
background-color: #ddeaf0;
}
.container img {
width: 268px;
height: auto;
padding: 10px;
background: white;
border: 1px solid #ddd;
box-shadow: 2px 2px 3px rgba(50, 50, 50, 0.4);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
}
.container img:hover {
box-shadow: 15px 15px 20px rgba(50, 50, 50, 0.4);
-webkit-transform: rotate(0deg) scale(1.60);
-moz-transform: rotate(0deg) scale(1.60);
transform: rotate(0deg) scale(1.60);
z-index: 2;
}
.pic{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
transform: rotate(-5deg);
}
</style>
</head>
<body>
<div id="datalist" class="container">
</div>
</body>
<script>
var clientWidth= document.body.clientWidth;
var clientHeight=document.body.clientHeight;
//console.log('浏览器高'+clientHeight);
//console.log('浏览器宽'+clientWidth);
var maxNumberH=Math.floor(clientHeight/2);
var maxNumberW=Math.floor(clientWidth-400);
var H=[1,maxNumberH];
var W=[1,maxNumberW];
//console.log(a);
var data=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg','image/5.jpg'];
//console.log(randomNumber(...a));
var htmlShow='';
var htmllist=[];
for(var index in data){
console.log(data[index]);
htmllist.push('<img class="pic" style="top:'+randomNumber(...H)+'px;bottom:'+randomNumber(...H)+'px;left:'+randomNumber(...W)+'px;right:'+randomNumber(...W)+'px;" src="'+data[index]+'">')
}
htmlShow=htmllist.join('');
//htmlShow='';
document.getElementById('datalist').innerHTML=htmlShow;
/**
* min:随机数下限
* max:随机数上限
*/
function randomNumber(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
</script>
</html>
