jsvascript学习（十三）- scroll相关综合案例

案例素材可到这里领取, __提取码：ephx __

1. 商品展示案例

通过导航条滑动可不断看到后面的商品列表

• 主要难点在于导航条长度与导航条左边距离的理算，类似于之前的等比缩放，详情可参考注释里面的笔记推算
• 这里涉及几个鼠标事件，onmousedown、onmousemove以及onmouseup，方法中的return false格外需要注意， 如果没有的话在导航条移动过程中就会在两个鼠标事件中产生冲突

2. 瀑布流图片布局案例

按照瀑布流对图片进行布局展示，往下移动会自动生成图片持续展示

• 难点在于对于图片大小以及屏幕宽度的把握
• 对于每一排的图片，要计算出高度最低的盒子将下一排第一个盒子插入此处，并对最低高度进行更新，其他的按照这种模式循环处理

---

index.html：

---

index.js：

window.onload = function () {
    // 1. 实现瀑布流布局
    waterFull("main", "box");

    // 2. 动态加载图片
    window.onscroll = function () {
        if(checkWillLoadImage()){
            // 2.1 造数据
            var dataArr = [
                {"src": "img04.jpg"},
                {"src": "img06.jpg"},
                {"src": "img08.jpg"},
                {"src": "img09.jpg"},
                {"src": "img10.jpg"},
                {"src": "img12.jpg"},
                {"src": "img14.jpg"},
                {"src": "img16.jpg"},
                {"src": "img18.jpg"}
            ];

            // 2.2 创建元素
            for(var i=0; i

---

myFunc.js里面是对scroll方法的封装，详情可参考上一节：

/**
 * 获取滚动的头部距离和左边距离
 * scroll().top scroll().left
 * @returns {*}
 */
function scroll() {
    if(window.pageYOffset !== null){
        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
    }
}

参考：
网易云js课程