图片瀑布流布局
来源：互联网 发布：淘宝店铺的公告 编辑：程序博客网 时间：2024/04/28 09:37
<%@ 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>
