程序博客网 > 方舟网络错误信息

js瀑布流

来源：互联网发布：方舟网络错误信息编辑：程序博客网时间：2024/05/21 05:18

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrap{
width: 800px;
border: 1px red solid;
margin: 0 auto;
overflow: hidden;
}
#wrap ul{
width: 200px;
padding: 10px;
list-style-type: none;
font-size: 50px;
border: 1px skyblue solid;
box-sizing: border-box;
float: left;
}
#wrap ul li{
margin-bottom: 20px;
padding-left: 5px;
background-color: #ccc;
width: 180px;

}
#square{
width: 50px;
height: 50px;
background-color: #ccc;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
</style>
</head>

<body>

<div id="wrap">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<div id="square"></div>
</body>
<script src="../js/tween.js"></script>//调用的js 库可以实现一些基本的动画效果
<script type="text/javascript">
var wrap = document.querySelector("#wrap");//获取wrap的元素名
var uls =wrap.children;//获取wrap下面的子元素
var num = 0; //计数

//随机函数
function rand(min,max){
return parseInt(Math.random()*(max-min+1)+min);

}

//将实现瀑布流功能的函数封装起来并且在外部调用一下

function pbl(){

for (var i = 0; i < 20; i++) {
num++;
var newLi = document.createElement("li");//创建li标签
var h = rand(200,400);//定义一下随机的高度值
newLi.style.height = h+"px";//给每个li设置高度
newLi.innerHTML = num;//给每个li赋个数值

var arrH=[]; //定义一个数组用来存放每次ul中li得高度
for (var j = 0; j < uls.length; j++) {
arrH.push(uls[j].offsetHeight);
}

var minHeight =arrH[0];//假设第一个il的高度最低
var minIndex = 0;//定义一个变量用来存放最低值的下标值
for (var j = 0; j < uls.length; j++) {
if(minHeight>arrH[j]){//判断当前li是否是那组数中最低的是的话就获取当前的下标
minHeight = arrH[j];
minIndex = j;

}
uls[minIndex].appendChild(newLi);//在高度值最小的那个元素下面输出li
}

}
}
pbl();
//当屏幕滚动的时候出现小方框
window.onscroll = function(){
var square = document.getElementById('square');
var t = document.documentElement.scrollTop||document.
body.scrollTop;
if(t>0){
square.style.display = "block";
}else{
square.style.display = "none";
}
}
//实现点击小方框返回顶部的效果
square.onclick = function(){
var start = document.documentElement.scrollTop||document.
body.scrollTop;
var end = 0;
var change = end-start;
var t = 0;
var d = 30;
timer = setInterval(function(){
t++;
if(t>d){
clearInterval(timer);
}
if (document.documentElement.scrollTop) {
document.documentElement.scrollTop = Tween.Back.easeIn(t,start,change,d);
}else{
document.body.scrollTop = Tween.Back.easeIn(t,start,change,d);
}
},30)
}

</script>
</html>

0 0

方舟网络错误信息

方舟网络错误信息

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子 windows7系统还原电脑屏幕变小怎么还原电脑安全模式怎么还原系统配置windowsupdate失败还原更改 windows10开机按f几进入一键还原还和婉芳作品之三还在读高二怎么知道自己膜还在不北京皮肤还选德胜门还好我们再遇见你还好吗英文还没好透还好我有神级账号你还好吗其实我还好终于等到你还好我没放弃还好有你还好吧还没好透gif慢放连接动图你在他乡还好吗原唱哥哥好涨还吸吗还没好透gif慢动作还好有你在农村交100好还2000好还没好透gif慢放连接图片还好还好强生医院好吗还选还好我们再遇见歌曲还好吗图片你还好吗英语还好还好吧那还好你还好吧还好什么意思还好还好哈还好吧英文还好吗我还好英文你还好吗图片还好是什么意思你还好吗英文