js学习笔记----进阶Day02瀑布流和scroll家族

商品展示

• 进度条长度的设置 : 取决于商品的长度

// 进度条移动 1px 商品移动多少像素
// 内容走的距离 / 滚动条走的距离 =（内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度)
//内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离

oul.style.left = - (oul.offsetWidth - slider.offsetWidth) / (slider.offsetWidth - progress_flag.offsetWidth) * x + 'px';

scroll家族

• window.onscroll只要当滚动条滚动就会调用

• box.scrollTop 内容被卷曲的上面距离

• box.scrollLeft

• scroll家族可以获取值, 也可以设置值.

• !!! 而offset家族只能获取值, 不能设置值. 应该用style.xx设置值

获取滚动距离(不同浏览器适配问题---浏览器模式)

• 浏览器适配问题

document.documentElement.scrollTop;

//或者最新的浏览器获取滚动距离

window.pageYoffset

• 获取滚动距离的兼容写法 (可以将方法抽取到一个css文件中)

function scroll() {
    if(window.pageYOffset || window.pageXOffset){
        // 是IE9+ 和最新的浏览器
        return {
            top:window.pageYOffset,
            left:window.pageXOffset
        };
    }else if(document.compatMode == "CSS1Compat"){
        // CSS1Compat是w3c标准模式 IE7+
        return {
            top:document.documentElement.scrollTop,
            left:document.documentElement.scrollLeft
        }
    }else {
        // 怪异模式 backCompat. IE6及以下
        return {
            top:document.body.scrollTop,
            left:document.body.scrollLeft
        }
    }
}

瀑布流 !!! 重点

• 特点: 等宽不等高

• 优点: 直观 简洁 节省空间

• 以类型的网站不会在一级页面使用. 因为会影响SEO优化 (可以放在二级页面)

• description 和 keywords. 这两个关键词的内容可以提高SEO效率.

eg. 京东主页head.png

步骤 :

1. 父盒子居中 让main在body中居中

• margin: 0 auto;//使用前提条件: 1. 块级元素 2. 宽高被设定, 并不超过父元素.

• 求瀑布流的动态宽度 = parseInt(屏幕宽度 / 盒子宽度) * 盒子宽度;

2. 子盒子定位

• 除了第一行, 其他都要定位. 将下一个盒子拼接到最矮的盒子下面

• 子盒子定位

创建一个高度数组
var arrH = [];
for(var i = 0; i 是因为没有定位.
        box.style.position = 'absolute';

        // 4.更新高度数组
        arrH[minIndex] = minH + boxH;
    }
}

underscore框架并不会污染变量, 因为使用了闭包.

中部吸顶效果 !!! 常用

• 使用到h5新增标签 : section 区块; nav 导航;

• 在>= 给nav添加类名fixed,

.fix{
    position: fixed;
 left: 0;
 top: 0; }