<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阻尼形变</title>
<style>
*{margin:0; padding:0}
div{height:200px; width:10%; background:orange; float:left; border-radius:10px;}
</style>
<script>
window.onload=function(){
var aDiv=document.getElementsByTagName('div');
var clientHeight=window.innerHeight;
//阻尼形变函数封装
function dampTransH(obj,dampCoefficient,target){
var efficient=dampCoefficient>1? 1.0-1/dampCoefficient : 1.0-dampCoefficient;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(target-obj.offsetHeight)*efficient;
speed=speed>0? Math.ceil(speed) : Math.floor(speed);
var curH=obj.offsetHeight+speed;
if((speed<0 && curH<target) || (speed>0 && curH>target)){
curH=target;
clearInterval(obj.timer);
}
obj.style.height=curH+'px';
},30);
}
//为10个柱子设置相应的事件响应
for(var i=0;i<aDiv.length;i++){
aDiv[i].onmouseover=function(){
dampTransH(this,0.6,clientHeight);
}
aDiv[i].onmouseout=function(){
dampTransH(this,0.6,200);
}
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>请问如何将上述效果做到屏幕底部实现？
实现细节要求：
无论浏览器窗口大小如何变化，所有柱子必须始终位于屏幕底部，而不是出现滚动条
当柱子位于屏幕底部时，柱子向上形变而非向下形变
在屏幕宽度发生变化的情况下，10个柱形必须能自适应宽度，
即无论屏幕宽度怎么变化，屏幕上总能显示出一排的10个柱子
在柱子高度发生变化的情况下，柱子最高高度总是浏览器窗口可用部分的高度
全程（无论是否触发动画）不能出现任意方向的滚动条