<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>瀑布流demo</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* container */
.container{position:absolute;top:0;}
.imgShow{
position:absolute;border:solid 1px #ccc;padding:10px ;width:300px;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
}
</style>
</head>
<body >
<div class="container">
<div class="imgShow"><a href="images/temp_img02.jpg"><img src="images/temp_img02.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img03.jpg"><img src="images/temp_img03.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img04.jpg"><img src="images/temp_img04.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img05.jpg"><img src="images/temp_img05.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img06.jpg"><img src="images/temp_img06.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img07.jpg"><img src="images/temp_img07.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img08.jpg"><img src="images/temp_img08.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img09.jpg"><img src="images/temp_img09.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img10.jpg"><img src="images/temp_img10.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img11.jpg"><img src="images/temp_img11.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img12.jpg"><img src="images/temp_img12.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img13.jpg"><img src="images/temp_img13.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img14.jpg"><img src="images/temp_img14.jpg"/></a></div>
<div class="imgShow"><a href="images/temp_img15.jpg"><img src="images/temp_img15.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>
原生js图片瀑布流布局_自适应屏幕全屏瀑布流布局.rar （16个子文件） 
瀑布流 images 
temp_img06.jpg 20KB temp_img12.jpg 40KB temp_img02.jpg 35KB temp_img03.jpg 44KB
Thumbs.db 58KB temp_img05.jpg 43KB temp_img11.jpg 49KB temp_img15.jpg 41KB temp_img10.jpg 28KB temp_img07.jpg 29KB temp_img14.jpg 99KB temp_img09.jpg 56KB temp_img08.jpg 28KB temp_img04 (1).jpg 33KB temp_img13.jpg 28KB
demo.html 4KB资源评论
小徐博客
- 粉丝: 1975
- 资源: 5413
最新资源
- 预计2030年全球昆虫源饲料市场规模将达到27.4亿美元
- 基于springboot的家政服务管理平台源码（java毕业设计完整源码+LW）.zip
- 预计2030年全球铌酸锂薄膜（LNOI）和钽酸锂薄膜（LTOI）市场规模将达到7.7亿美元
- 基于企业微信的客户运营9问9答
- 地级市数字贸易关注度词频数据及城市数字贸易关注度词频数据（2003-2024年）.txt
- HTML5 Canvas烟花动画：JavaScript与CSS的结合实现动态效果
- 全新UI-APP分发系统网站源码-全新IPA/APK APP分发平台+对接码支付+密钥生成
- 使用HTML和CSS打造闪烁彩灯的圣诞树网页
- 华为交换机网络设备MIB文件
- 最新更新！！！全国各省、市、县逐年水文数据（降水量）1950-2022
- 预计2030年全球铌酸锂单晶薄膜市场规模将达到4.17亿美元
- SXU-软件工程论文及绘图
- 预计2030年全球一次性刀叉餐具市场规模将达到28.1亿美元
- 预计2030年全球脂质纳米粒子（LNP）生产设备市场规模将达到3亿美元
- 基于springboot的农机电招平台源码（java毕业设计完整源码+LW）.zip
- 智慧航道动态监测管理平台
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
