JS实例-DOM知识

1、右下角悬浮框(富媒体)：

右下角广告

在高级浏览器下可以直接用 position：fixed 固定定位

该实例主要解决IE6下的不兼容fixed的问题。

知识点

滚动高度/宽度：
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;

可视区高度：

可视区 - 就是你能看见的区域的大小
    
    document.documentElement.clientHeight

可视区宽度：
    document.documentElement.clientWidth

物体本身的高度、宽度：
物体 -> obj
obj.offsetHeight
obj.offsetWidth

取的是盒子模型的高度/宽度

盒子模型：width/height + padding + border + margin

盒子模型大小：width/height + padding + border

offsetHeight的返回值是number ， 大小是盒模型大小，当display:none 时获取的值为 0

事件
window.onscroll
当滚动滚动条的时候
window.onresize
当缩放浏览器的时候

代码

    
广告

2、懒加载（）

物体距离左边/上边的距离：
父级：
a). parentNode -> 结构上的父级
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};
}

---

慢点加载
原因：节约资源，节约带宽，节省钱

查看是否加载
chrome -> network -> 加载痕迹

怎么让一个图片不加载 ？
不给src，在需要的时候给
写_src 约定俗成

定义属性：
a). . 点
b). [] 中括号
c). obj.getAttribute('自定义属性名字');

设置自定义属性：
obj.aaa = xxx;
obj.setAttribute('自定义属性名字','值是多少');

删除自定义属性
obj.removeAttribute('自定义属性名字');

*** 自定义属性的方法方式不能混合使用

代码

3、简单瀑布流（花瓣网）：

特点：
a). 宽度一致，高度是参差不齐
b). 滚不完

aUl -> 伪数组
    没有数组的方法

物体的内容高度：
物体 -> obj
obj.scrollHeight

注意点：
如果内容的高度小于盒模型的高度，取盒模型的高度
如果内容的高度大于盒模型的高度，取内容的高度

效果：

简单瀑布流

代码：