首页 > 代码库 > 7.6
7.6
一、网页后退
后退：
<input type="button" value="http://www.mamicode.com/后退" onclick="javascript:history.go(-1);">
二、瀑布流
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
div{
background: #ccc;
width: 200px;
position: absolute;
transition:0.5s; /*把鼠标指针放到 div 元素上，其宽度会从 200px 逐渐变为 350px*/
}
</style>
</head>
<body>
<script>
createDiv ()
function createDiv () {
for (var i = 0; i < 20; i++) {
var div = document.createElement(‘div‘);
var rnd = Math.floor(Math.random()*300+50) //div的高度在50到350之间
div.style.height = rnd + "px";
div.innerHTML = i;
document.body.appendChild(div);
};
change() // 该事件仅在 Style 属性设置为 0（下拉 Combo）或 1（简单 Combo）和正文被改变或者通过代码改变了 Text 属性的设置时才会发生。
}
function change() {
var aDiv = document.getElementsByTagName(‘div‘);
// alert(aDiv.length);
var windowCW = document.documentElement.clientWidth; //窗口视口的宽度
var n = Math.floor(windowCW/210); //一行能容纳多少个div，并向下取整
if (n<=0) {return}; // alert(n);
var t = 0;
var center = (windowCW - n*210)/2; //居中
var arrH = []; //定义一个数组存放div的高度
for (var i = 0; i < aDiv.length; i++) {
var j = i%n;
if (arrH.length==n) { //一行排满n个后到下一行
var min = findMin(arrH); //从最“矮”的排起，可以从下图的序号中看得出来，下一行中序号是从矮到高排列的
aDiv[i].style.left =center + min*210 + "px";
aDiv[i].style.top = arrH[min]+10 + "px";
arrH[min] += aDiv[i].offsetHeight + 10; // alert(min);
}else{
arrH[j] = aDiv[i].offsetHeight;
aDiv[i].style.left =center + 200*j+10*j + "px";
aDiv[i].style.top = 0;
}
}; }
window.onresize = function(){ //窗口改变也调用函数 onresize 事件会在窗口或框架被调整大小时发生。
change(); }
window.onscroll= function () { //onscroll 事件在元素滚动条在滚动时触发。
// 页面总高度 var bodyHeight = document.documentElement.offsetHeight;
// 可视区高度 var windowHeight = document.documentElement.clientHeight;
//滚动条的高度 var srcollTop = document.documentElement.scrollTop || document.body.scrollTop;
var srcollH = document.body.scrollHeight; // alert(srcollH);
if (srcollTop+windowHeight >= srcollH-20) {
createDiv(); }; }
function findMin(arr) {
var m = 0;
for (var i = 0; i < arr.length; i++) {
m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;
}
return m; }
</script>
</body>
</html>
三、上下左右的阿斯科码值
switch(getch()){
case 224: //方向键区的ASCII码 switch(getch()){ case 72： //上 break; case 80： //下 break; case 75: //左 break; case 77: //右 break; } }
7.6