1、右下角懸浮框(富媒體)：
右下角廣告
在高級瀏覽器下可以直接用 <b>position：fixed 固定定位</b>
該實(shí)例主要解決IE6下的不兼容fixed的問題。
<b>知識點(diǎn)</b>
滾動高度/寬度：
html: document.documentElement
body: document.body
縱向:
獲取滾動高度：
document.body.scrollTop
兼容：Chrome
FF/IE: 0
document.documentElement.scrollTop
兼容：FF/IE
Chrome: 0
兼容版：
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
橫向：
滾動的寬度
兼容問題同上。
兼容版:
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
可視區(qū)高度：
可視區(qū) - 就是你能看見的區(qū)域的大小
document.documentElement.clientHeight
可視區(qū)寬度：
document.documentElement.clientWidth
物體本身的高度、寬度：
物體 -> obj
obj.offsetHeight
obj.offsetWidth
取的是盒子模型的高度/寬度
盒子模型：width/height + padding + border + margin
盒子模型大?。簑idth/height + padding + border
offsetHeight的返回值是number ， 大小是盒模型大小，當(dāng)display:none 時獲取的值為 0
<b>事件</b>
window.onscroll
當(dāng)滾動滾動條的時候
window.onresize
當(dāng)縮放瀏覽器的時候
代碼
<style>
body {height:2000px;}
div {width:200px;height:200px;background:blue; position:fixed;_position:absolute;right:5px;bottom:10px;font-size:100px;text-align:center;line-height:200px;color:#fff;}
</style>
<script>
//ie 6 兼容寫法
if (window.navigator.userAgent.toLowerCase().indexOf('msie 6.0') != -1) {
window.onload = window.onscroll = window.onresize = function () {
var oBox = document.getElementById('box');
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var clientHeight = document.documentElement.clientHeight;
var oHeight = oBox.offsetHeight;
oBox.style.top = (scrollTop + clientHeight -oHeight)+'px';
};
}
</script>
<body>
<div id="box">廣告</div>
</body>
2、懶加載（）
物體距離左邊/上邊的距離：
父級：
a). parentNode -> 結(jié)構(gòu)上的父級
b). offsetParent -> 定位父級
祖宗： body
物體 -> obj
左邊：obj.offsetLeft
物體距離有定位父級的左邊的一個距離
上邊：obj.offsetTop
物體距離有定位父級的上邊的一個距離
求物體距離上邊/左邊的絕對距離：
getPos(obj);
function getPos(obj) {
var l = 0;
var t = 0;
while(obj) {
l += obj.offsetLeft;
t += obj.offsetTop;
// 換定位父級
obj = obj.offsetParent;
}
return {left: l, top: t};
}
慢點(diǎn)加載
原因：節(jié)約資源，節(jié)約帶寬，節(jié)省錢
查看是否加載
chrome -> network -> 加載痕跡
怎么讓一個圖片不加載 ？
不給src，在需要的時候給
寫_src 約定俗成
定義屬性：
a). . 點(diǎn)
b). [] 中括號
c). obj.getAttribute('自定義屬性名字');
設(shè)置自定義屬性：
obj.aaa = xxx;
obj.setAttribute('自定義屬性名字','值是多少');
刪除自定義屬性
obj.removeAttribute('自定義屬性名字');
*** 自定義屬性的方法方式不能混合使用
代碼
<style>
* {margin:0;padding:0;list-style:none;}
ul li {width:300px;height:300px;border:1px solid #000;margin:10px;float:left; }
ul li img {width:100%; }
</style>
<script>
function getPos(obj) {
var l = 0; //默認(rèn)左邊距離
var t = 0; //默認(rèn)高度
//循環(huán) 獲取l 和 t 的值
while (obj) {
l += obj.offsetLeft;
t += obj.offsetTop;
obj = obj.Offsetparent;
}
return {top: t, left: l};
}
window.onload = window.onscroll = window.onresize = function () {
var oBox = document.getElementById('box');
var aImg = oBox.getElementsByTagName('img');
//獲取滾動高度
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
//獲取可視區(qū)高度
var clientH =document.documentElement.clientHeight;
//循環(huán)改變符合條件img的src
for (var i = 0; i < aImg.length; i++) {
if (scrollT + clientH >= getPos(aImg[i]).top) {
aImg[i].src = aImg[i].getAttribute('_src');
}
}
};
</script>
<body>
<ul id="box">
<li><img _src="cat/1.jpg" alt="..."/></li>
<li><img _src="cat/2.jpg" alt="..."/></li>
<li><img _src="cat/3.jpg" alt="..."/></li>
<li><img _src="cat/4.jpg" alt="..."/></li>
<li><img _src="cat/5.jpg" alt="..."/></li>
<li><img _src="cat/6.jpg" alt="..."/></li>
<li><img _src="cat/7.jpg" alt="..."/></li>
<li><img _src="cat/8.jpg" alt="..."/></li>
<li><img _src="cat/9.jpg" alt="..."/></li>
<li><img _src="cat/10.jpg" alt="..."/></li>
<li><img _src="cat/11.jpg" alt="..."/></li>
<li><img _src="cat/12.jpg" alt="..."/></li>
</ul>
3、簡單瀑布流（花瓣網(wǎng)）：
特點(diǎn)：
a). 寬度一致，高度是參差不齊
b). 滾不完
aUl -> 偽數(shù)組
沒有數(shù)組的方法
物體的<b>內(nèi)容</b>高度：
物體 -> obj
obj.scrollHeight
注意點(diǎn)：
如果內(nèi)容的高度小于盒模型的高度，取盒模型的高度
如果內(nèi)容的高度大于盒模型的高度，取內(nèi)容的高度
效果：
簡單瀑布流
代碼：
<style>
div {width:1100px;margin: 0 auto; }
div ul{width:200px;margin:10px;border:1px solid #000;float:left;list-style:none;}
div ul li{width:180px;margin:10px;}
</style>
<script>
function rnd(n,m) {
return parseInt(Math.random()*(m-n)+n);
}
function createLi() {
var oLi = document.createElement('li');
oLi.style.height = rnd(200,400) +'px';
oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
return oLi;
}
window.onload = function () {
var oBox = document.getElementById('box');
var aUl = oBox.children;
function createLi20() {
for (var i = 0; i < 20; i++) {
var oLi = createLi();
var arr = [];
for (var k = 0; k <aUl.length; k++) {
arr.push(aUl[k]);
}
arr.sort(function (ul1, ul2) {
return ul1.offsetHeight - ul2.offsetHeight;
});
arr[0].appendChild(oLi);
}
}
createLi20();
window.onscroll = function () {
var scrollT = document.documentElement.scrollTop||document.body.scrollTop;
var clientH = document.documentElement.clientHeight;
var iH = document.body.scrollHeight;
if (scrollT + clientH >= iH) {
createLi20();
}
};
};
</script>
<body>
<div id = "box">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
