JS基础-特效篇（瀑布流）

案例：https://www.duitang.com/search/?kw=%E5%B8%85%E5%93%A5&type=feed一个叫堆糖的网址，搜索图片的时候，能够不断的往下浏览！
案例：https://list.mogu.com/search/goods?q=%E8%BF%9E%E8%A1%A3%E8%A3%99&acm=3.mce.1_10_13u0k2.39084.108675.lSznUswUSj2nz.mid_39084-sd_115-mdt_sketch-pm_998-dit_-lc_201&from=searchplacehold&ptp=31.v5mL0b.0.0.yWjN8CKG这个是女装的网站！往下拉也是，但是他是等宽等高！所以不典型！！！！

外边有一个大盒子，里面有很多个小盒子！宽度都是一样的小盒子，但是高度不一样！参差摆放的，可以用瀑布流！
布局：父盒子，子盒子；子盒子相对于父盒子做定位！第二行的第一个盒子放在第一行最矮的那个盒子后面！以此类推！盒子中最后一张图出现一半，再进行渲染加载！

1.基础页面

<div id="main">
    <div class="box">
        <div class="pic"><img src="images/color02.jpeg" alt=""></div>
    </div>
    <!--这里面有很多box和pic，可以复制很多！这里略过!-!>
    <div class="box">
        <div class="pic"><img src="images/color03.jpg" alt=""></div>
    </div>
</div>

2.样式文件

<link rel="stylesheet" href="css/index.css">

*{
    margin: 0;
    padding: 0;
    border: none;
}
img{
    vertical-align: top; /*顶部对齐*/
}
#main{
    position: relative;/*方便后面定位*/
}

.box{
    float: left;
    padding: 15px 0 0 15px; /*做成内边距，不用加border*/
}
.pic{
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
}
.box img{
    width: 165px;
}

3.JS函数

<script src="MyTool/MyTool.js"></script>
<script src="js/index.js"></script>
<script src="lib/underscore-min.js"></script>

https://underscorejs.net/#min

//MyTool/MyTool.js
var myTool = {
    $:function (id) {return typeof id === "string" ? document.getElementById(id) : null; },
    scroll:function() {
        if (window.pageYOffset !== null) { //最新的浏览器
            return{
                //里面相当于字面量对象或JSON对象，是有区别的
                "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
        }
    }
};

window.addEventListener('load', function (ev) {
    //1实现瀑布流布局
    waterFull('main', 'box');
    //2加载数据
    window.addEventListener('scroll', function (ev1) {
        if (checkWillLoadNewBox('main', 'box')) {
            //2.1假数据
            var dateArr = [
                {'src':"images/watch.jpg"},
                {'src':"images/watch.jpg"},
                {'src':"images/watch.jpg"},
                {'src':"images/watch.jpg"},
                {'src':"images/watch.jpg"},
                {'src':"images/watch.jpg"},
                {'src':"images/watch.jpg"},
                {'src':"images/watch.jpg"}
            ];
            //2.2遍历数据
            for (var i = 0; i < dateArr.length; i++) {
                var newBox = document.createElement('div');
                newBox.className = 'box';
                myTool.$('main').appendChild(newBox);

                var newPic = document.createElement('div');
                newPic.className = 'pic';
                newBox.appendChild(newPic);

                var newImg= document.createElement('img');
                newImg.src =dateArr[i].src ;
                newImg.style.width = 165 + 'px';
                newPic.appendChild(newImg);
            }

            //2.3重新进行瀑布流布局
            waterFull('main','box');
        }
    })
});

/*
*@description:[实现瀑布流布局]
*@param:[String]parent
*@param:[String]child
*/
function waterFull(parent, child) {
    //1.父盒子居中
    //1.1获取标签
    var all_box = myTool.$(parent).getElementsByClassName(child); //main-->box，拿到所有的盒子
    //1.2获取其中一个子盒子的宽度（当前页面宽度除以每个盒子的宽度就是列数，取整就可以了！列数乘以盒子的宽度就是父盒子的宽度！这个是为了居中！）
    var boxWidth = all_box[0].offsetWidth;
    //1.3获取文档宽度
    var screenW = document.documentElement.clientWidth || document.body.clientWidth;
    //1.4求出列数
    var cols = parseInt((screenW / boxWidth));
    //1.5父盒子居中
    myTool.$(parent).style.width = cols * boxWidth + 'px';
    myTool.$(parent).style.margin = '0 auto';//块级标签的居中

    //2子盒子定位
    //2.1定义变量
    var heightArr = [], boxHeight = 0, minBoxHeight = 0, minBoxIndex;//高度数组
    //2.2遍历所有的盒子（找盒子的所属行数，下标小于总列数，是第一行）
    for (var i = 0; i < all_box.length; i++) {
        boxHeight = all_box[i].offsetHeight;
        //2.3判断
        if (i < cols) {//第一行
            heightArr.push(boxHeight);
        } else {//剩余所有行
            //2.4取出数组中最矮盒子的高度
            minBoxHeight = _.min(heightArr);
            //2.5取出最矮盒子在数组中的索引
            minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
            //2.6剩余子盒子的定位（这个时候，所有的盒子都追加到最矮盒子的后面！）
            all_box[i].style.position = 'absolute';
            all_box[i].style.left = minBoxIndex * boxWidth + 'px';
            all_box[i].style.top = minBoxHeight + 'px';
            //2.7更新高度
            heightArr[minBoxIndex] += boxHeight;
        }
    }
}

/*
*@description:[取出一行最矮盒子的下标]
*@param:[Array]arr
*@param:[Number]val
*/
function getMinBoxIndex(arr, val) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] === val) {
            return i;
        }
    }
}

/*
*@description:[检查是否加载数据]
*@param:[String]parent
*@param:[String]child
*/
function checkWillLoadNewBox(parent, child) {
    //1.获取最后的盒子
    var allBox = myTool.$(parent).getElementsByClassName(child);
    var lastBox = allBox[allBox.length - 1];
    //2.最后盒子高度的一半(盒子高度的一半加上了盒子距离页面顶端的距离)
    var lastBoxHeightHalf = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
    //3.求出页面高度
    var screenH = document.documentElement.clientHeight || document.body.clientHeight;
    //4.求出页面滚出浏览器的高度
    var scrollTopH = myTool.scroll().top;
    //5.返回结果（是与整个父盒子main比较的！）
    return lastBoxHeightHalf <= screenH + scrollTopH;
}

看着这别人考公考博我都要放弃了！但是，不行！我得努力！坚持一下！胜利就在前方！