JS操作html元素瀑布流

web.jpeg

瀑布流原理

• 每一次出现的新盒子 拼接到 现有盒子中 高度最小的下面
• 第一行盒子是不要定位的
• 第二行盒子开始定位
• 定义一个数组存储盒子的高度
• 每一次拼接 需要 把原来盒子的高度 和 拼接盒子的高度 相加 放在原来盒子的 索引上

布局

• 每一个div盒子是紧紧的相连，中间并没有spac，大的box是有 paddng-left,padding-top撑开，造成有空隙的假象

  <div id="main">
        <div class="box">
            <div class="pic"><img src="images/0.jpg" alt=""></div>
        </div>
    </div>

image.png image.png

JS 计算

function layoutUI() {
    //获取整个mian
    var mainObj = document.getElementById("main");
    //获取box
    var boxOBJ = mainObj.children;

    var boxWidth = boxOBJ[0].offsetWidth;

    var clientWidth = client().width;

    var col = parseInt(clientWidth / boxWidth);

    //设置 main 宽度 居中
    mainObj.style.width = col * boxWidth + "px";

    //临时数组 存放高度
    var arr = [];
    for (var i = 0; i < boxOBJ.length; i++) {
        //第一列 不需要定位，只要 i < col就是第一列
        if (i < col) {
            var height = boxOBJ[i].offsetHeight;
            arr.push(height)
            //
            boxOBJ[i].style = "";

        } else {
            //第二列
            //获取最小的高度
            var minHeight = _.min(arr);
            // //获取最小高度对应的 下标
            var index = arr.indexOf(minHeight);
            //定位
            boxOBJ[i].style.position = "absolute";
            boxOBJ[i].style.left = index * boxWidth + "px";
            boxOBJ[i].style.top = minHeight + "px";
            //更新数组的高度
            //boxOBJ.offsetHeight 当前元素的高度
            arr[index] = minHeight + boxOBJ[i].offsetHeight;

        }
    }
}

layoutUI();

//滚动界面 继续加载数据
window.onscroll = function () {

    var loadData = checkloadNewData();
    if (loadData) {
        //加载最新的数据
        var data = [
            { src: 'images/1.jpg' },
            { src: 'images/10.jpg' },
            { src: 'images/23.jpg' },
            { src: 'images/25.jpg' },
            { src: 'images/11.jpg' },
            { src: 'images/40.jpg' },
            { src: 'images/39.jpg' },
            { src: 'images/36.jpg' },
            { src: 'images/35.jpg' }
        ];

    //获取整个mian
    var mainObj = document.getElementById("main");
        for (var i = 0; i < data.length; i++) {
            //创建标签
            var img = document.createElement("img");
            var obj = data[i];
            img.src = obj["src"];
            //创建pic
            var pic = document.createElement("div");
            pic.className = "pic";
            pic.appendChild(img);
            //创建box
            var box = document.createElement("div");
            box.className = "box";
            box.appendChild(pic);
            mainObj.appendChild(box);
        }
        layoutUI();
    }

}

/**
 *  什么情况下 加载最新的数据 或者 盒子
 * 当最后一个盒子的高度的一半出现的时候 就需要加载 最新的高度
 * 
 * 如果 界面滚动的距离 + 可视区域的 高度 >= 最后一个盒子高度/2 + 最后一个盒子的 offsetop的时候
 * 
 */

function checkloadNewData() {
    //获取整个mian
    var mainObj = document.getElementById("main");
    //获取box
    var boxOBJ = mainObj.children;
    //获取最后一个盒子
    var lastIndex = boxOBJ.length - 1;
    var lastObj = boxOBJ[lastIndex];
    //判断
    var isLoading = scroll().top + client().height >= lastObj.offsetHeight + lastObj.offsetTop;

    return isLoading;


}



/**
 *  屏幕的尺寸发生变化的时候
 * 
 */

 var timer = null;
 window.onresize = function(){
     //当尺寸放生变化的时候，重新布局
 
    //一变化就加载布局的话  比较消耗性能
    //函数节流：降低函数调用的频率
    clearTimeout(timer);
    //执行一次
    setTimeout(function(){
        layoutUI();
        console.log("执行测试");
        
    },200);


 }



//计算最小值
function getMIn(arr) {
    var objc = new Object();
    //假设 第一个是最小值
    objc.minValue = arr[0];
    objc.minIndex = arr[0];
    for (var i = 1; i < arr.length; i++) {
        if (minValue > arr[i]) {
            minValue = arr[i];
            minIndex = i;
        }
    }

    return objc;
}


//获取滚动的距离
function scroll() {
    if (window.pageYOffset != null) {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    }

    if (document.compatMode == "CSS1Compat") {

        return {
            left: document.documentElement.scrollLeft,
            top: document.documentElement.scrollTop

        }
    }


    return {
        left: document.body.scrollLeft,
        top: document.body.scrollTop
    }
}



//获取视口的宽度
function client() {
    //IE
    if (window.innerWidth != null) {

        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }
    //W3C
    if (document.compatMode == "CSS1Compat") {

        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
    //怪异模式
    return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
    }
}