//动态设置页面左右居中

/**

 * 瀑布流效果：

 * 1.第二行 的图片第一张图片应该放在每列的高度最矮的图片下面

 * 2.

 *

 */

window.onload = function () {

    waterFlow();

    // 准备上拉加载数据

    var dataImage = {

        data: [

            { src: "./imges/9.jpg" },

            { src: "./imges/1.jpg" },

            { src: "./imges/2.jpg" },

            { src: "./imges/3.jpg" },

            { src: "./imges/4.jpg" },

            { src: "./imges/5.jpg" },

            { src: "./imges/6.jpg" },

            { src: "./imges/7.jpg" },

            { src: "./imges/8.jpg" },

            { src: "./imges/10.jpg" },

        ]

    }

    window.onscroll = function () {

        if (checkReachBottom()) {

            console.log("触底了");

        }

    }

}

function waterFlow() {

    ///获取父级容器

    var parentCotainer = document.getElementById("container");

    //获取所有子元素

    var allChild = document.getElementsByClassName("box");

    //获取屏幕宽度

    var screenwidth = document.documentElement.clientWidth;

    //获取一个图片容器的宽度

    var childWidth = allChild[0].offsetWidth;

    //计算屏幕水平方向最多能摆放的个数

    var rowsNum = Math.floor(screenwidth / childWidth) - 1;

    //居中

    parentCotainer.style.cssText = "width:" + rowsNum * childWidth + "px;margin:0 auto;";

    getMinHeightOfCols(allChild, rowsNum);

}

waterFlow();

//2 .动态图片位置

function getMinHeightOfCols(allChild, rowsNum) {

    //获取 存储 每列的高度

    var colsHeightArr = [];

    for (var i = 0; i < allChild.length; i++) {

        //判断取出第一行图片，并获取高度，放入到数组中

        if (i < rowsNum) {//当i大于最多数时 自动跳到下一行

            //获取当前图片高度

            colsHeightArr[i] = allChild[i].offsetHeight;

        } else {

            //第二行

            //获取本行中高度最小图片的那一列

            var MinHeightOfCols = Math.min.apply(null, colsHeightArr);

            //获取最小值对应的下标(位置)

            var MinHeightOfIndex = colsHeightArr.indexOf(MinHeightOfCols);

            //摆放位置

            allChild[i].style.position = "absolute";

            allChild[i].style.top = MinHeightOfCols + 'px';

            allChild[i].style.left = allChild[MinHeightOfIndex].offsetLeft + 'px';

            //高度的合并

            colsHeightArr[MinHeightOfIndex] = colsHeightArr[MinHeightOfIndex] + allChild[i].offsetHeight;

        }

    }

}

//3.判断页面触底

/*

1. 逻辑 : 滚动高度 +页面可视窗口高度 ；

2. 业务 ：滚动高度 +视口高度 > 文档总高度 -  最后一张图片高度

*/

function checkReachBottom() {

    //获取滚动高度

    var scorllHeight = document.documentElement.scrollTop;

    //获取视口高度

    var pageHeight = document.documentElement.clientHeight;

    //文档总高度

    //获取最后一个元素

    var allChild = document.getElementsByClassName("box");

    var lastChildBox = allChild[allChild.length - 1];//最后一个元素

    var lastChildBoxTop = allChild[allChild.length - 1].offsetHeight;//最后一个元素距离顶部高度

    return lastChildBoxTop < pageHeight + scorllHeight ? true : false;

}

老师我这个 设置完后只要滑动就 触发  那个 触底函数了 

* {

    padding: 0;

    margin: 0;

}

body {

    background-color: gray;

}

.container {

    width: 300px;

    height: 200px;

    background-color: white;

    margin: 100px auto;

}

.container.up {

    height: 50px;

    width: 100%;

}

.container .up ul {

    list-style: none;

    text-align: center;

}

.container .up ul li {

    float: left;

    height: 50px;

    line-height: 50px;

    width: 60px;

}

.container .up ul li a {

    text-decoration: none;

    font-size: 20px;

}

.select {

    border-bottom: 2px solid orange;

}

.container .down {

    height: 100px;

    width: 100%;

    position: relative;

    text-align: center;

}

.container .down div {

    position: absolute;

    line-height: 100px;

    height: 100%;

    width: 100%;

    display: none;

}

.container .down div .div-select {

    display: block;

}

为啥我这个 div-select  中 displayblock 优先级还是不够 我加了！import 那个百度内容才显示出来

在第一种方法中，array和arr[i]有什么关系？为什么打印array是arry[i]的结果呢？没搞懂这个过程

老师,最后一行classlist.add添加不生效怎么办

<script>

        var divname = document.createElement("div")

        var body = document.getElementsByTagName("body")

        body[0].appendChild(divname)

        var text = document.createTextNode("动态文本节点")

        divname.appendChild(text)

        var divid = document.createAttribute("id")

        divid.value = "divid"

        divname.setAttributeNode(divid)

        divname.id = "new divid"

        var divclass = document.createAttribute("class")

        divclass.value = "divclass"

        divname.setAttributeNode(divclass)

        divname.className = "new classname"

        divname.classList.add("new")

    </script>

/^[a-zA-Z0-9_\$]{1,}$/

这个是什么意思啊，没太懂

老师，想问一下，为什么可以用&分割，原字符串里并没有&啊

又为什么第二个分割后没有&，而第一个有

var arr = ["尚学堂","百战程序员"];

var myArr = arr.join("&");

console.log(myArr);

console.log(myArr.split("&"));

练习题第二题，因为num1不>=num2，所以无打印，不是吗

        leftBtn.onclick = function () {

            idx--

            console.log(idx);

            changePic();

        }

        rightBtn.onclick = function () {

            idx++

            console.log(idx);

            changePic();

        }

感觉左右切换图片显示的按键，左侧idx--右侧idx++比较好，与下方的指示器能对上

/* 
    瀑布流效果
        1、第二行的第一张图片，应该放在每列的高度最矮的图片下面
 */
// 1、动态设置页面居中
window.onload = function(){
    waterFlow();
}


function waterFlow(){
    // 获取父级容器
    var parentContainer = document.getElementById("container");
    // 获取子元素
    var allChild = document.getElementsByClassName("box");
    // 获取屏幕
    var screenWidth = document.documentElement.clientWidth;
    // 获取一个图片容器的宽度
    var childWidth = allChild[0].offsetWidth;
    // 计算屏幕水平方向最多能摆放的图片个数
    var rowsNum = Math.floor(screenWidth / childWidth) - 1; // 向下取整，预留一张作为空白区
    // 让页面左右居中
    parentContainer.style.cssText = "width:" + rowsNum * childWidth + "px;margin:0 auto;";

    getMinHeightOfCols(allChild,rowsNum);
}

// 2、动态设置图片位置

function getMinHeightOfCols(allChild,rowsNum){
    // 数组存储每列的高度
    var colsHeightArr = [];
    for(var i = 0;i < allChild.length;i++){
        // 判断取出第一行的图片，获取图片对应的高度，放入到数组中
        if(i < rowsNum){    // i=6
            // 获取当前图片的高度
            colsHeightArr[i] = allChild[i].offsetHeight;
        }else{
            // 获取一列高度最小的值
            var minHeightOfCols = Math.min.apply(null,colsHeightArr);
            // 获取最小值对应的下标（（位置）
            var minHeightOfIndex = colsHeightArr.indexOf(minHeightOfCols);
            // 摆放第二张图片的位置 
            allChild[i].style.position = "absolate";
            allChild[i].style.top = minHeightOfCols+"px";
            allChild[i].style.left = allChild[minHeightOfIndex].offsetLeft+"px";

            //高度的合并
            colsHeightArr[minHeightOfIndex]=colsHeightArr[minHeightOfIndex]+allChild[i].offsetHeight;
        }
    }

}

找了好几遍，不知道为什么，总是有那个空隙？

为什么判断移动端还是pc端哪里用-1做临界值？

!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background: red;
            border: 10px solid yellow;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>

<body>

    <div class="box" id="box"></div>

    <script>

        var box = document.getElementById("box");
        console.log(box.offsetHeight);
        console.log(box.offsetWidth);

    </script>

</body>

</html>

为什么我打印不出来140，而是139

这个数据类型是不是还有其他的？

var lis = document.querySelector(".up").querySelectorAll("li");
var divs = document.querySelector(".down").querySelectorAll("div");
var timer=null;
for (var i = 0; i < lis.length; i++) {
    (function (i) {
        lis[i].onmouseenter = function () {
            timer = setTimeout(function () {
                for (var j = 0; j < lis.length; j++) {
                    lis[j].removeAttribute("class");
                    divs[j].removeAttribute("class")
                }
                lis[i].setAttribute("class", "select")
                divs[i].setAttribute("class", "div-select")
            }, 300)
        }
    }(i))
    lis[i].onmouseout = function () {
        clearTimeout(timer);
    }
}

合并以后只能显示第一个，悬停没效果了，怎么办

for(var i = 0;i<circlelis.length;i++){
     (function(i){
        circlelis[i].onclick = function(){
            idx = i;
            changePic();
        }
    })(i)
}

这里为什么onclick在for循环内而不是onclick在for循环外面

这节课的标题应该是JavaScript_Node节点”方法“吧，appendChild在视频里都说是方法了，不是属性