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<allBox.length; i++){
    // 1.取出盒子
    var box = allBox[i];
    // 获取每一个盒子的高度
    var boxH = box.offsetHeight;

    if(i < cols){
        // 第一行
        // 第一行盒子i不需要定位 并且把第一行盒子的高度添加到高度数组中
        arrH.push(boxH);
    }else {
        // 不是第一行
        // 盒子需要定位
        // 每次拼接到最矮盒子的下面
        // 1.从高度数组中找出最小值
        var minH = _.min(arrH);
        // 2.获取最小值的索引
        // indexOf 获取数组中当前值的索引
        var minIndex = arrH.indexOf(minH);
        //检索字符串 str.indexOf('a');  str.lastIndexOf('a');

        // 3.设置当前盒子的x值
        box.style.left = minIndex * boxW + 'px';
        box.style.top = minH + 'px';
        //浏览器中看到top left有值, 但是并不生效 => 是因为没有定位.
        box.style.position = 'absolute';

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

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

中部吸顶效果 !!! 常用

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

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

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