<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#header{
position:absolute;
top:0;
left:0;
width: 100%;
height: 70px;
background:url(./images/header.png) repeat-x 0 -20px;
}
#top{
float:left;
color:white;
font-size:18px;
}
body{
background:url("./images/bg.png") repeat;
list-style: none;
font: bold 12px "微软黑体";
}
.container {
position: absolute;
top: 70px;
}
.imgShow {
position: absolute;
border: solid 1px #ccc;
padding: 10px;
width: 200px;
top: 0px;
left: 0px;
-webkit-transition: all .7s ease-out .1s;
-moz-transition: all .7s ease-out .1s;
-o-transition: all .7s ease-out .1s;
transition: all .7s ease-out .1s
}
img {
width: 100%;
}
</style>
</head>
<body>
<div id="header">
<div id="top">欢迎你:${command.username}</div>
</div>
<div class="container">
<div class="imgShow">
<a href="./upImg/P2.jpg"><img src="./upImg/P2.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P3.jpg"><img src="./upImg/P3.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P9.jpg"><img src="./upImg/P9.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P5.jpg"><img src="./upImg/P5.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P6.jpg"><img src="./upImg/P6.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P7.jpg"><img src="./upImg/P7.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P8.jpg"><img src="./upImg/P8.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P9.jpg"><img src="./upImg/P9.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P10.jpg"><img src="./upImg/P10.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P11.jpg"><img src="./upImg/P11.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P12.jpg"><img src="./upImg/P12.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P13.jpg"><img src="./upImg/P13.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P14.jpg"><img src="./upImg/P14.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P15.jpg"><img src="./upImg/P15.jpg" /></a>
</div>
<div class="imgShow">
<a href="./upImg/P15.jpg"><img src="./upImg/P15.jpg" /></a>
</div>
</div>
<script type="text/javascript">
document.getElementsByClassName = function(className, tag, elm) {
var testClass = new RegExp("(^|\s)" + className + "(\s|$)");
var tag = tag || "*";
var elm = elm || document;
var elements = (tag == "*" && elm.all) ? elm.all : elm
.getElementsByTagName(tag);
var returnElements = [];
var current;
var length = elements.length;
for ( var i = 0; i < length; i++) {
current = elements[i];
if (testClass.test(current.className)) {
returnElements.push(current);
}
}
return returnElements;
}
var margin = 10;
var boxes = document.getElementsByClassName('imgShow');
var con = document.getElementsByClassName('container');
var text = document.getElementsByTagName('h4');
var boxWidth = boxes[0].offsetWidth + margin;
function show() {
var columnHeight = [];
var bodyWidth = document.body.offsetWidth;
var n = parseInt(bodyWidth / boxWidth);
var columnNum = n == 0 ? 1 : n;
var bodyLeft = bodyWidth >= boxWidth ? bodyWidth - columnNum
* boxWidth : 0;
con[0].style.left = parseInt(bodyLeft / 2) - margin / 2 + 'px';
for ( var i = 0, l = boxes.length; i < l; i++) {
if (i < columnNum) {
columnHeight[i] = boxes[i].offsetHeight + margin;
boxes[i].style.top = 0;
boxes[i].style.left = i * boxWidth + margin + 'px';
} else {
var innsertColumn = min(columnHeight), imgHeight = boxes[i].offsetHeight
+ margin;
boxes[i].style.top = columnHeight[innsertColumn] + 'px';
boxes[i].style.left = innsertColumn * boxWidth + margin
+ 'px';
columnHeight[innsertColumn] += imgHeight;
}
;
}
;
};
function min(heightAarry) {
var minColumn = 0;
var minHeight = heightAarry[minColumn];
for ( var i = 1, len = heightAarry.length; i < len; i++) {
var temp = heightAarry[i];
if (temp < minHeight) {
minColumn = i;
minHeight = temp;
}
;
}
;
return minColumn;
}
window.onload = function() {
show();
};
window.onresize = function() {
show();
};
</script>
</body>
</html>
图片瀑布流布局
最新推荐文章于 2021-06-30 01:11:42 发布