js学习笔记（瀑布流特效下）

css代码

*{
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}
img{
   vertical-align: top; /*把元素的顶端与行中最高元素的顶端对齐*/
}
#main{
    position: relative;/*相对定位*/
}
/*大盒子box是满的，用padding做间距*/
.box{
    float: left;
    padding: 15px 0 0 15px;
    margin: 0 auto;
}
.box img{
    width: 165px;
}
/*小盒子pic也是满的，依旧用padding做间距*/
.pic{
    padding: 10px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
}

Tool代码

(function (w) {
    w.Tool = {
        $: function (id) {
            return document.getElementById(id);
        },
        scroll: function() {
            if (window.pageYOffset !== null) {
                return {
                    "top": window.pageYOffset,
                    "left": window.pageYOffset
                };
            } else if (document.compatMode === "CSS1Compat") {
                return {
                    "top": document.documentElement.scrollTop,
                    "left": document.documentElement.scrollLeft
                };
            } else {
                return {
                    "top": document.body.scrollTop,
                    "left": document.body.scrollLeft
                };
            }
        }
    };

})(window);//将Tool绑到window里

瀑布流js代码

window.addEventListener('load',function (ev) {
    //瀑布流布局
    waterfull('main', 'box');
    //加载数据
    //节流
    var timer1 = null;
    window.addEventListener('scroll',function (ev1) {
        clearTimeout(timer1);
        timer1 = setTimeout(function () {
            if (check()){
                //假数据做加载
                var dataA = [
                    {"src" : "image/img01.jpg"},
                    {"src" : "image/img02.jpg"},
                    {"src" : "image/img03.jpg"},
                    {"src" : "image/img04.jpg"},
                    {"src" : "image/img05.jpg"},
                    {"src" : "image/img06.jpg"},
                    {"src" : "image/img07.jpg"},
                ];
                //遍历数据,创建盒子
                for(var i = 0; i < dataA.length; i++){
                    var newbox = document.createElement('div');
                    newbox.className = 'box';
                    Tool.$('main').appendChild(newbox);
                    var newpic = document.createElement('div');
                    newpic.className = 'pic';
                    newbox.appendChild(newpic);
                    var newimg = document.createElement('img');
                    newimg.src = dataA[i].src;
                    newpic.appendChild(newimg);
                }
                //重新瀑布流布局
                waterfull('main', 'box');
            }
        },200)

    });
    //页面尺寸发生改变重新布局
    /*
    因为尺寸改变的非常频繁，但是又不需要时时刻刻都去布局，只要到指定位置布局就行
    所以要做个节流
     */
    var timer= null;
    window.addEventListener('resize',function () {
        clearTimeout(timer);
        //但是在拉小之后再把尺寸拉大之后，会给原先第一行没有定位的图片加上定位，所以需要再清除第一行的定位
        //节流
        timer = setTimeout(function () {
            waterfull('main','box');
        },200);
    })
});

/**
 * 实现瀑布流布局
 * @param {string}parent
 * @param {string}child
 */
function waterfull(parent, child) {
    var allbox = Tool.$(parent).getElementsByClassName(child);
    //求出一个子盒子的宽度
    var boxwidth = allbox[0].offsetWidth;
    //获取列数
    var W = document.body.clientWidth || document.documentElement.clientWidth;//页面宽度
    //列数，随着窗口大小的变化，图片列数也会变化
    var cols = parseInt( W / boxwidth);
    Tool.$(parent).style.width = cols * boxwidth + 'px';
    //子盒子定位
    var heightA = []/*高度数组*/, boxheight = 0/*盒子高度*/, minheight = 0/*最矮高度*/, minindex = 0/*最矮索引*/;
    for (var i = 0; i < allbox.length; i++){
        boxheight = allbox[i].offsetHeight;
        //判断盒子的行数
        if (i < cols){//第一行
            heightA.push(boxheight);
            allbox[i].style = '';//清除尺寸改变带来的第一行的定位
        }else{//剩余行
            //取出数组中最矮的盒子
            minheight = _.min(heightA);
            //取出盒子在数组中的下标/索引
            minindex = getindex(heightA,minheight);
            //剩余盒子的定位
            allbox[i].style.position = 'absolute';
            allbox[i].style.left = minindex * boxwidth + 'px';
            allbox[i].style.top = minheight + 'px';
            //更新最矮盒子的高度
            heightA[minindex] += boxheight;
        }
    }
}
function getindex(arr, val) {
    for (var i = 0; i < arr.length; i++){
        if (arr[i] === val){
            return i;
        }
    }
}
function check() {
    var allbox = Tool.$('main').getElementsByClassName('box');
    var lastbox = allbox[allbox.length - 1];
    var lastheight = lastbox.offsetHeight / 2 + lastbox.offsetTop;
    //页面高度
    var height = document.body.clientHeight || document.documentElement.clientHeight;
    //页面滚出浏览器的高度
    var Gheight = Tool.scroll().top;
    //自己制定规则，返回结果
    return lastheight <= height + Gheight;
}