1、window.onresize 监听浏览器窗口大小变化
- 当浏览器宽高发生变化，就会自动触发
2、window.onscroll 监听滚动条
- 当滚动条发生移动自动触发事件
3、window.onload
- 当页面资源全部加载完毕的时候触发，只会触发一次
滚动偏移 window.onscroll
- 滚动条事件，当页面滚动条发生偏移的时候，会触发这个事件
- 获取窗口 document.documentElement
- 获取窗口可见的高度 document.documentElement.clientHeight
- 获取窗口可见的宽度 document.documentElement.clientWidth
- 获取页面整体高度 document.documentElement.scrollHeight
- 获取页面整体宽度 document.documentElement.scrollWidth
- 完美兼容
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
回到顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap{
width: 300px;
height: 300px;
border: 5px solid #333;
}
#btn{
width: 200px;
height: 100px;
border-radius: 20px;
font-size: 40px;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
</style>
</head>
<body>
<button id="btn">回到顶部</button>
<div class="fwrap">
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
<div class="wrap"></div>
</div>
</body>
<script>
//获取大盒子
var fwrap = document.querySelector('.fwrap');
var btn = document.querySelector('#btn');
//谷歌和火狐支持
window.onscroll = function(){
//滚动条高度
var sT = parseInt(document.documentElement.scrollTop) ;
console.log(sT);
//可视区域高度
var cH = parseInt(document.documentElement.clientHeight);
console.log(cH);
//页面整体高度
var sH = parseInt(document.documentElement.scrollHeight);
console.log(sH);
//计算公式 ： 滚动条高度 + 可视区域高度 = 页面整体高度
if((sT + cH) == sH){
//当页面滑到底部时，为页面添加一个盒子
var ele = document.createElement('div');
ele.className = 'wrap';
ele.style.backgroundColor = '#' + parseInt(Math.random() * 0xffffff).toString(16);
//将创建好的大盒子添加至大盒子中
fwrap.appendChild(ele);
// alert('你以到达页面底部');
btn.style.display = 'block';
}
}
//给按钮绑定点击事件
btn.onclick = function(){
//获取当前的滚轮高度
var num = document.documentElement.scrollTop;
console.log('当前的滚轮高度:' + num);
var timer = setInterval(function(){
num -= 40;
document.documentElement.scrollTop = num;
btn.style.display = 'none';
if(num <= 0){
//清除定时器
clearInterval(timer);
}
},10)
}
</script>
</html>
瀑布流
实现思路：
- 1、在html中写一个大盒子wrap
- 2、获取wrap标签
- 3、先声明一个空的对象。 var json = {list:[]}
- 4、使用for生成测试数据，声明一个空对象obj，用来保存对象数据
- 5、对象数据生成完毕后，将数据添加(push)至测试的json对象中
- 6、定义一个方法，创建所有的盒子，将创建好的盒子添加至wrap中
- 7、定义一个渲染数据的方法，获取json对象中list的数组，使用for循环生成盒子，调用创建盒子的方法 。
- 8、声明一个方法，计算一行中最多可以排几列，获取浏览器视窗宽度和盒子的宽度，两者相除，对结果进行取整
- 9、定义一个方法，给所有的盒子做定位
- 10、先获取所有的盒子、浏览器的视窗、盒子所占的宽度、剩余空间的宽度，间隙平分
剩余空间
间隙 = 视窗宽度 % 盒子的宽度 / (列数 + 1) - 11、使用for循环给所有的item定位，先判断第一行有几个，索引值小于列数，则证明是第一行，先给第一行做定位，再给其他行做定位
- 12、取出盒子所有的高度，存在一个数组中
- 13、找出数组中最小高度 Math.min.apply(null,数组)
- 14、根据最小值查找它的下标，然后设置其left值
- 15、更新高度数组中的数据 新的列高 = 旧的高度 + 上下间距 + item高度
- 16、当页面加载完毕之后执行代码 重新调用定位方法
- 17、当页面大小发生变化，触发定位方法 重新调用定位方法
- 18、当页面到达底部时，不断渲染页面
- 19、判断到底部时，调用创建所有item的方法及定位方法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
margin: 0;
padding: 0;
}
.wrap{
border: 1px solid #ccc;
margin: auto;
position: relative;
}
.item{
width: 250px;
border: 1px solid red;
box-shadow: 0 0 5px #666;
padding: 10px;
padding-bottom: 0;
position:absolute;
transition: 0.5s;
}
.item>img{
width: 100%;
}
.price,.dc{
font-size: 20px;
margin-left: 10px;
margin-bottom: 5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: rgb(45, 15, 243);
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
<script>
//做一个测试数据
var data = {
imgList : [
// {
// name : "一号女",
// introduce : "爱上对方过后就哭了",
// src: "./img/1.jpeg"
// }
],
}
for(var i = 0 ; i < 23; i++){
var obj = {};
obj.name = "女人" + (i + 1);
obj.introduce = "爱上对方过后就去微软推哭了";
obj.src = `./img/${i+1}.jpeg`;
//对象信息生成完毕后，将这个obj添加至测试data的数组中
data.imgList.push(obj);
}
console.log(data);
//封装一个生成item 的方法
function creatItem(data){
//创建item
var item = document.createElement('div');
item.className = 'item';
item.innerHTML = `
<img class="img" src="${data.src}" alt="">
<div class="price">价格:${data.name}</div>
<div class="dc">简介:${data.introduce}</div>
`;
// return item
//将创建好的item加入到wrap中
wrap.appendChild(item)
}
var wrap = document.querySelector('.wrap');
allImg();
//定义一个渲染全部数据的方法
function allImg(){
var datas = data.imgList;
for(var i = 0; i < datas.length; i++){
creatItem(datas[i]);
}
}
//定义一个方法计算需要拍几列
function col(){
//获取窗口内容区域的宽度
var winW = document.documentElement.clientWidth;
//获取item的宽度
var itemW = document.getElementsByClassName('item')[0].offsetWidth;
//计算一行中能排几个，对结果取整
var num = parseInt(winW / itemW);
return num;
}
console.log(col());
//定义一个方法给item定位
function posItem(){
//定义第一行
var item = document.getElementsByClassName('item');
//item的宽度
var iW = item[0].offsetWidth;
//获取窗口内容区域的宽度
var winW = document.documentElement.clientWidth;
//一行中剩下多大的距离
var mar = winW % iW;
//计算到每一个间距是多大
mar = mar / (col() + 1);
var arrH = [];
//使用for循环给所有的item定位
for(var i = 0 ; i < item.length; i++){
//给第一行做定位
//i < col() 就算第一行
if(i < col()){
item[i].style.top = '0px';
item[i].style.left = (iW * i + mar * (i + 1)) + 'px';
//取出item的高度添加到arrH中
var h = item[i].offsetHeight;
arrH.push(h);
console.log(arrH);
}else{
//其他行和第一行不一样,将新的item定位到最短的列中
//判断最短的列是哪一列
//Math.min.apply() 取最小值
var min = Math.min.apply(null,arrH); //固定写法
console.log(min);
var mt = 20;
//将最小值+上下间距作为新的item的top值
item[i].style.top = (min + mt) + 'px';
//确定left的值
//先确定最小的列是第几列,根据最小值查出其索引值
var index = arrH.indexOf(min);
item[i].style.left = (iW * index + mar * (index + 1)) + 'px';
//更新高度数组中的数据
// 新的列高 = 旧的高度 + 上下间距 + item高度
arrH[index] = min + mt + item[i].offsetHeight;
}
}
}
//当页面加载完毕之后执行代码
window.onload = function(){
posItem()
}
//当页面大小发生变化，触发定位方法
window.onresize = function(){
//调用图片的定位方法
posItem();
}
//当页面到达底部时，重新渲染
window.onscroll = function(){
//判断到底部
var winH = document.documentElement.clientHeight;
var top = document.documentElement.scrollTop;
var sH = document.documentElement.scrollHeight;
if(winH + top >= sH){
//调用创建所有item的方法
allImg();
posItem();
}
}
</script>
</html>
网友评论