[H5]Javascript瀑布流

用HTML、CSS和Javascript实现瀑布流效果。

[index.html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link rel="stylesheet" href="indexCSS.css">
    <script src="indexJS.js"></script>
</head>
<body>
    <!--父视图-->
    <div id="superDivID">
        <!--图片根视图-->
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1987826422,3902444409&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=52961750,4241917740&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2641791226,3925668594&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1683328425,3416302444&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3003671193,2553903077&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2317290404,595811789&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2626132253,3693590351&fm=27&gp=0.jpg">
            </div>
        </div>
        <div class="baseDivClass">
            <div class="imgDivClass">
                <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=895886714,3307578363&fm=27&gp=0.jpg">
            </div>
        </div>
    </div>
</body>
</html>

[indexCSS.css]

*{
    margin: 0px;
    padding: 0px;
}

#superDivID{
    position: relative;
}

.baseDivClass{
    padding: 5px;
    float: left;
}

.imgDivClass{
    /*内边距*/
    padding: 5px;
    /*边框*/
    border: 1px solid #66CCFF;
    /*圆角*/
    border-radius: 5px;
    /*阴影*/
    box-shadow: 0px 1px 5px #66CCFF;
}

.imgDivClass img{
    width: 200px;
    height: auto;
}

[indexJS.js]

// 获取第一列的高度，自后每张图都加载到该去的位置
var sectionHeights = [];

// 窗口加载时触发
window.onload = function () {
    var superDiv = parameterSuperDiv();
    var baseDivs = parmeterBaseDivs();
    setLoadPictureOnRowAction(superDiv, baseDivs);
}

// 父视图div
function parameterSuperDiv () {
    return document.getElementById("superDivID");
}

// 图片根视图divs
function parmeterBaseDivs () {
    return getAllBaseDivAction(parameterSuperDiv(), "baseDivClass");
}

// 获取所有的baseDiv
function getAllBaseDivAction (superDiv, divClass) {
    var resultDivs = [];
    // tag name传"*"表示获取所有的子节点
    var subViews = superDiv.getElementsByTagName("*");
    for (var i = 0 ; i < subViews.length ; i ++) {
        var tempView = subViews[i];
        if (tempView.className == divClass) {
            resultDivs.push(tempView);
        }
    }
    return resultDivs;
}

// 根据窗口大小确定每行加载图片的张数
function setLoadPictureOnRowAction (superDiv, baseDivs) {
    var screenWidth = document.body.offsetWidth;
    var baseDivWidth = baseDivs[0].offsetWidth;
    var number = Math.floor(screenWidth/baseDivWidth);
    // 更改样式，固定每行显示几张图片
    superDiv.style.cssText = "width:"+baseDivWidth*number+"px;margin:0 auto"; // 居中
    for (var i = 0 ; i < baseDivs.length ; i ++) {
        var tempDiv = baseDivs[i];
        if (i < number) {
            sectionHeights.push(tempDiv.offsetHeight);
        } else {
            // 获取到列高数组中最短的高度
            var minHeight = Math.min.apply(null, sectionHeights);
            // 获取最短高度的索引
            var minIndex = getMinHeightIndexAction(sectionHeights, minHeight);
            // 放置div
            tempDiv.style.position = "absolute"; // 绝对布局
            tempDiv.style.top = minHeight + "px";
            tempDiv.style.left = baseDivs[minIndex].offsetLeft+"px";
            // 更新列高数组
            sectionHeights[minIndex] = sectionHeights[minIndex] + tempDiv.offsetHeight;
        }
    }
}

// 获取最短高度的索引
function getMinHeightIndexAction (heightArr, height) {
    for (var i in heightArr) {
        if (heightArr[i] == height) {
            return i;
        }
    }
}

// 拖动滚动条时触发
window.onscroll = function () {
    if (judgeHandleAction()) {
        var superDiv = parameterSuperDiv();
        var baseDivs = parmeterBaseDivs();
        var dataArr = getDataActon().data;
        for (var i = 0 ; i < dataArr.length ; i ++) {
            var tempBaseDiv = document.createElement("div");
            tempBaseDiv.className = "baseDivClass";
            superDiv.appendChild(tempBaseDiv);
            var tempImgDiv = document.createElement("div");
            tempImgDiv.className = "imgDivClass";
            tempBaseDiv.appendChild(tempImgDiv);
            var tempImg = document.createElement("img");
            tempImg.src = dataArr[i].href;
            tempImgDiv.appendChild(tempImg);
            //////
            // 获取到列高数组中最短的高度
            var minHeight = Math.min.apply(null, sectionHeights);
            // 获取最短高度的索引
            var minIndex = getMinHeightIndexAction(sectionHeights, minHeight);
            // 放置div
            tempBaseDiv.style.position = "absolute"; // 绝对布局
            tempBaseDiv.style.top = minHeight + "px";
            tempBaseDiv.style.left = baseDivs[minIndex].offsetLeft+"px";
            // 更新列高数组
            sectionHeights[minIndex] = sectionHeights[minIndex] + tempBaseDiv.offsetHeight;
        }
    }
}

// 判断是否执行操作，滚动至最后一张图片
function judgeHandleAction () {
    var superDiv = parameterSuperDiv();
    var baseDivs = parmeterBaseDivs();
    var lastTopHeight = baseDivs[baseDivs.length-1].offsetTop;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (lastTopHeight <= scrollTop + scrollHeight) {
        return true;
    }
}

// 获取数据
function getDataActon () {
    var tempData = {data:[
            {href:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=667706406,1676631862&fm=27&gp=0.jpg"},
            {href:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=51507768,2947470087&fm=27&gp=0.jpg"},
            {href:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1071296691,2665895355&fm=27&gp=0.jpg"},
            {href:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3093140537,3384201392&fm=27&gp=0.jpg"},
            {href:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3054219273,1131937745&fm=27&gp=0.jpg"},
            {href:"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1581547123,4018285152&fm=27&gp=0.jpg"},
            {href:"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2794185879,949273817&fm=27&gp=0.jpg"},
            {href:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3423585557,1183372858&fm=27&gp=0.jpg"},
            {href:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2710939957,1867847746&fm=27&gp=0.jpg"},
            {href:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4006270021,2695890097&fm=27&gp=0.jpg"},
            {href:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3289367186,506696049&fm=27&gp=0.jpg"},
            {href:"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1994328069,2361504869&fm=27&gp=0.jpg"},
            {href:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3303201075,3149655512&fm=27&gp=0.jpg"},
            {href:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1728955560,3431188870&fm=27&gp=0.jpg"}
        ]};
    return tempData;
}

示意图：

[H5]Javascript瀑布流

猜你喜欢