有效沟通问答-【官方】百战程序员_IT在线教育培训机构

/* 
    瀑布流效果
        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;
        }
    }

}

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

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 2楼

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

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 3楼

!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

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 4楼

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

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 5楼

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);
    }
}

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

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 6楼

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

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

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 7楼

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

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 8楼

老师，像这种images[ i ]的读取内容的方法，是因为images是一个对象类型吗？

WEB前端全系列/第二阶段：JavaScript编程模块/DOM模型 9楼

var arrx=[1,2,3,5,4,2,5,6,5,2];
        for(var i in arrx){
            console.log("a")
            for(var j=i+1;j<arrx.length;j++){
                if(arrx[i]===arrx[j]){
                    arrx.splice(j,1);
                    j--;
                }
            }
        }
        console.log(arrx)

var i in arrx这种遍历方法之前在数组遍历那节课有介绍过，但是这样写出来却没有达到数组去重的效果，为什么呢？

WEB前端全系列/第二阶段：JavaScript编程模块/字符串与数组 10楼

老师，这个tostring()方法讲解在哪里

WEB前端全系列/第二阶段：JavaScript编程模块/Math与Date 11楼

var arr = [1,1,3,2,4,5,6,6,1,6];

var array = [];

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

if(array.___(arr[i]) === -1){

array.___(arr[i])

}

console.log(array);

老师,他这个是怎么实现去除不相邻的元素的

WEB前端全系列/第二阶段：JavaScript编程模块/字符串与数组 12楼

老师，这个是上课的笔记，数值这里，是“复数”，不是“负数”吧

WEB前端全系列/第二阶段：JavaScript编程模块/运算符_数据类型和流程循环语句 13楼

封装cookie应用场景是什么

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 14楼

这节课算在讲js性能优化吗

WEB前端全系列/第二阶段：JavaScript编程模块/浏览器模型(BOM) 15楼

同学您好