图片瀑布流布局

TalonChen

于 2013-12-04 18:20:16 发布

阅读量510

点赞数

分类专栏：中午一休闲

本文链接：https://blog.csdn.net/hay24/article/details/17123199

版权

中午一休闲专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<%@ 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>

TalonChen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片瀑布流布局

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>主页*{ margin: 0; padding: 0;}body{ background:url("./images/bg.png") repeat; list-style: none; font:
复制链接

扫一扫