滚动事件的认识
- 实际开发中，我们经常需要监听滚动事件
- 滚动事件一般是由 window 来触发
window.onscroll = function(){
//获取滚动的距离
var myScrolltop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(myScrollTop);
}
不同浏览器中获取滚动距离的方式
- 在 ie9 以及新的版本
var scrollT = window.pageYOffset;
- 在火狐以及符合 w3c 标准的浏览器
var scrollT = document.documentElement.scrollTop;
- 谷歌浏览器以及没有定义 DTD
var scrollT = document.body.scrollTop;
var myScrollT = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
scroll().top;
scroll().left;
- 抽取滚动距离的方法
//抽取方法用来获取滚动的距离
function scroll(){
//判断不同浏览器
if(windows.pageXOffset != null){
//ie9 以及新的版本
return {
top:window.pageYOffset,
left:window.pageXOffset
}
}else if(document.compatMode == 'CSS1Compat'){
//表示火狐以及符合 w3c
return{
top:document.documentElement.scrollTop,
left:document.documentElement.scrollLeft
}
}
return {
top:document.body.scrollTop,
left:document.body.scrollLeft
}
}
瀑布流的注意点
- 获取第一行的高度最短的盒子
- 将后面的盒子放置到高度最短的盒子下方
- 更新最短盒子的高度，再次寻找最短盒子，此处创建函数来执行*
- 当滚动的距离 + 屏幕的高度 >= 最后一个盒子的 offsetTop + 最后一个盒子高度的一半的时候，开始加载图片（此处设定临界值自由设置），此处创建函数来判断
- 加载图片就是动态创建添加盒子，数据是存放在字典中的
- 加载之后再次调用 * 处的函数，让图片正确排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流三练</title>
<style>
*{
margin: 0;
padding: 0;
border:none;
}
.box{
padding:10px 0 0 10px;
float: left;
}
.box .pic{
padding: 10px;
border: 1px solid #CCCCCC;
}
.box .pic img{
width: 150px;
}
</style>
</head>
<body>
<div class="main" id="main">
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
<div class="box"><div class="pic"></div></div>
</div>
<script src="js/Underscore-min.js"></script>
<script src="js/MyFn.js"></script>
<script>
window.onload = function () {
window.onscroll = function () {
water();
if(checkLoadDate()){
var images = [{src:'21.jpg'},{src:'11.jpg'},{src:'1.jpg'},{src:'12.jpg'},{src:'13.jpg'},{src:'14.jpg'},{src:'5.jpg'},{src:'21.jpg'},{src:'11.jpg'},{src:'1.jpg'},{src:'12.jpg'},{src:'13.jpg'},{src:'14.jpg'},{src:'5.jpg'}];
for(var i = 0;i<images.length;++i){
var main = document.getElementById("main");
var box = document.createElement("box");
var pic = document.createElement("pic");
main.appendChild(box);
box.className = "box";
pic.className = "pic" ;
box.appendChild(pic);
var img = document.createElement("img");
img.src = "images/" + images[i].src;
pic.appendChild(img);
}
}
};
function getIndex(arr,value){
for(var i = 0;i<arr.length;++i){
if(arr[i] == value){
return i;
}
}
}
function water(){
var main = document.getElementById("main");
var box = main.children;
var pic = box.children;
var screenW = document.documentElement.clientWidth;
var boxW = box[0].offsetWidth;
var col = parseInt(screenW/boxW);
var heightArr = []
for(var i = 0 ; i <box.length;++i){
var boxHeight = box[i].offsetHeight;
// console.log(boxHeight);
if(i < col){
heightArr.push(boxHeight)
}else{
var minHeight = _.min(heightArr);
// console.log(minHeight);
var minIndex = getIndex(heightArr,minHeight);
// console.log(minIndex);
box[i].style.position = "absolute";
box[i].style.top = minHeight + 'px';
box[i].style.left = minIndex * box[0].offsetWidth + 'px';
heightArr[minIndex] += boxHeight;
}
}
}
function checkLoadDate(){
var main = document.getElementById("main");
var box = main.children;
var pic = box.children;
var scrollTop = scroll().top;
var lastBox = box[box.length - 1];
var screenH = document.documentElement.clientHeight;
if(scrollTop + screenH > lastBox.offsetTop + lastBox.offsetWidth*0.5){
return true;
}else{
return false;
}
}
}
</script>
</body>
</html>
- 滚动到某个位置
window.scrollTo(0,800);
//第一个参数表示水平滚动，第二个参数表示垂直滚动
window 的内置对象
- 任何一个全局变量都是 window 的属性
- 任何一个全局函数都是 window 的方法
- 注意不要在 window.onload 方法使用 window 获取全局的属性和方法
console.log(window.dog);
window.sum();
字符串的常见方法
- 创建字符串
var myString = 'my敏感体质';
- 获取某一个字符的位置
如果获取某个字符的位置，这个字符有多个，那么获取是第一个的位置
//indexOf:从左到右获取字符的位置，顺序是从左到右
var index = myString.indexOf('a');
//lastIndexOf: 从右到左获取字符的位置，结果顺序是从左到右
var lastI = myString.lastIndexOf('a');
- 获取某个位置的字符
//charAt:获取某个位置的字符
var mySym = myString.charAt(1);
//myCodeSym:获取某个字符的 Unicode 编码
//但凡汉子转化成 Unicode 编码值是大于 127 的
var myCodeSym = myString.charCodeAt(1);
//获取字符的长度
console.log(myString.length);
- 获取字符的实际占用字节数
/*1.创建字符*/
var myString = '1234324 我的名字';
/*2.抽取方法获取实际占用的字节数*/
function getLength(str){
/*2.1遍历字符*/
var length = 0;
for(var i = 0;i < str.length;i++){
/*2.2获取每一个字符的Unicode编码值*/
var mySym = str.charCodeAt(i);
if (mySym > 127){
length +=2;
}else {
length+=1;
}
}
return length;
}
/*3.调用方法验证是否正确*/
var result = getLength(myString);
console.log(result);
