瀑布流布局

作者: 大乔是个美少女 | 来源:发表于2018-06-01 15:02 被阅读0次

瀑布流布局的学习
瀑布流、木桶布局
瀑布流照片墙布局
CSS经典布局
瀑布流
瀑布流布局_木桶布局
瀑布流和懒加载结合
瀑布流
瀑布流
瀑布流的三种实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="image/0.jpg">
            </div>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

window.onload = function(){
    waterfall('main', 'box');
    var dataInt = {"data":[{"src": "0.jpg"},{"src": "1.jpg"},{"src": "2.jpg"},{"src": "3.jpg"}]};
    window.onscroll = function(){
        if(checkScrollSlide()){
            // 将数据块渲染到当前页面的尾部
            var oParent = document.getElementById('main');
            for(var i = 0; i < dataInt.data.length; i++) {
                var oBox = document.createElement('div');
                oBox.className = 'box';
                oParent.appendChild(oBox);
                var oPic = document.createElement('div');
                oPic.className = 'pic';
                oBox.appendChild(oPic);
                var oImg = document.createElement('img');
                oImg.src="image/"+dataInt.data[i].src;
                oPic.appendChild(oImg);
            }
            waterfall('main', 'box');
        }
    }
}

function waterfall(parent, box){
    // 将main下所有class为box的元素都取出来
    var oParent = document.getElementById(parent);
    var oBoxs = getByClass(oParent, box);
    // 计算整个页面显示的列数（页面宽/box的宽）
    var oBoxW = oBoxs[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
    // 设置main的宽度
    oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;'
    var hArr = []; // 存放每一列高度的数组
    for(var i = 0; i < oBoxs.length; i++){
        if(i < cols){
            hArr.push(oBoxs[i].offsetHeight);
        } else {
            var minH = Math.min.apply(null, hArr);
            var index = getMinhIndex(hArr, minH);
            oBoxs[i].style.position="absolute";
            oBoxs[i].style.top = minH + 'px';
            // oBoxs[i].style.left = oBoxW * index + 'px';
            oBoxs[i].style.left = oBoxs[index].offsetLeft+'px';
            hArr[index] += oBoxs[i].offsetHeight;
        }
    }
}

// 根据class获取元素
function getByClass(parent, clsName){
    var boxArr = new Array(),  // 用来存储获取到的所有class为box的元素
        oElements=parent.getElementsByTagName("*");
    for(var i=0; i<oElements.length; i++){
        if(oElements[i].className==clsName){
            boxArr.push(oElements[i]);
        }
    }
    return boxArr;
}

function getMinhIndex(arr, val){
    for(var i in arr){
        if(arr[i] == val) {
            return i;
        }
    }
}

//检测是否具备了滚动加载数据块的条件
function checkScrollSlide(){
    var oParent = document.getElementById('main');
    var oBoxs = getByClass(oParent, 'box');
    var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
    // 标准模式和混杂模式
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientHeight || document.documentElement.clientHeight;
    return (lastBoxH < scrollTop + height)? true: false;
}