滾動(dòng)事件的認(rèn)識(shí)
- 實(shí)際開(kāi)發(fā)中抛虫，我們經(jīng)常需要監(jiān)聽(tīng)滾動(dòng)事件
- 滾動(dòng)事件一般是由 window 來(lái)觸發(fā)
window.onscroll = function(){
//獲取滾動(dòng)的距離
var myScrolltop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(myScrollTop);
}
不同瀏覽器中獲取滾動(dòng)距離的方式
- 在 ie9 以及新的版本
var scrollT = window.pageYOffset;
- 在火狐以及符合 w3c 標(biāo)準(zhǔn)的瀏覽器
var scrollT = document.documentElement.scrollTop;
- 谷歌瀏覽器以及沒(méi)有定義 DTD
var scrollT = document.body.scrollTop;
var myScrollT = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
scroll().top;
scroll().left;
- 抽取滾動(dòng)距離的方法
//抽取方法用來(lái)獲取滾動(dòng)的距離
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
}
}
瀑布流的注意點(diǎn)
- 獲取第一行的高度最短的盒子
- 將后面的盒子放置到高度最短的盒子下方
- 更新最短盒子的高度，再次尋找最短盒子脸哀，此處創(chuàng)建函數(shù)來(lái)執(zhí)行*
- 當(dāng)滾動(dòng)的距離 + 屏幕的高度 >= 最后一個(gè)盒子的 offsetTop + 最后一個(gè)盒子高度的一半的時(shí)候蝌诡，開(kāi)始加載圖片（此處設(shè)定臨界值自由設(shè)置），此處創(chuàng)建函數(shù)來(lái)判斷
- 加載圖片就是動(dòng)態(tài)創(chuàng)建添加盒子，數(shù)據(jù)是存放在字典中的
- 加載之后再次調(diào)用 * 處的函數(shù)镰禾，讓圖片正確排版
<!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>
- 滾動(dòng)到某個(gè)位置
window.scrollTo(0,800);
//第一個(gè)參數(shù)表示水平滾動(dòng)黑竞，第二個(gè)參數(shù)表示垂直滾動(dòng)
window 的內(nèi)置對(duì)象
- 任何一個(gè)全局變量都是 window 的屬性
- 任何一個(gè)全局函數(shù)都是 window 的方法
- 注意不要在 window.onload 方法使用 window 獲取全局的屬性和方法
console.log(window.dog);
window.sum();
字符串的常見(jiàn)方法
- 創(chuàng)建字符串
var myString = 'my敏感體質(zhì)';
- 獲取某一個(gè)字符的位置
如果獲取某個(gè)字符的位置，這個(gè)字符有多個(gè)疏旨，那么獲取是第一個(gè)的位置
//indexOf:從左到右獲取字符的位置很魂，順序是從左到右
var index = myString.indexOf('a');
//lastIndexOf: 從右到左獲取字符的位置，結(jié)果順序是從左到右
var lastI = myString.lastIndexOf('a');
- 獲取某個(gè)位置的字符
//charAt:獲取某個(gè)位置的字符
var mySym = myString.charAt(1);
//myCodeSym:獲取某個(gè)字符的 Unicode 編碼
//但凡漢子轉(zhuǎn)化成 Unicode 編碼值是大于 127 的
var myCodeSym = myString.charCodeAt(1);
//獲取字符的長(zhǎng)度
console.log(myString.length);
- 獲取字符的實(shí)際占用字節(jié)數(shù)
/*1.創(chuàng)建字符*/
var myString = '1234324 我的名字';
/*2.抽取方法獲取實(shí)際占用的字節(jié)數(shù)*/
function getLength(str){
/*2.1遍歷字符*/
var length = 0;
for(var i = 0;i < str.length;i++){
/*2.2獲取每一個(gè)字符的Unicode編碼值*/
var mySym = str.charCodeAt(i);
if (mySym > 127){
length +=2;
}else {
length+=1;
}
}
return length;
}
/*3.調(diào)用方法驗(yàn)證是否正確*/
var result = getLength(myString);
console.log(result);
