21 - JavaScript瀑布流

`html`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/style.css">
<body>
<div id="main">
    <div class="box">
        <div class="pic"><img src="./images/0.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/1.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/2.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/3.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/4.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/5.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/6.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/7.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/8.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/9.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/10.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/11.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/12.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/13.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/14.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/15.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/16.jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="./images/17.jpg"></div>
    </div>
    <div class="box">
        <div class="pic"><img src="./images/18.jpg"></div>
    </div>
</div>
<script src="./js/waterfall.js"></script>
</body>
</html>

`css`

*{margin: 0;padding: 0;}

#main{
    margin: 0 auto;
    position: relative;
}
.box{
    padding: 15px 0 0 15px;
    float:left;
}
.pic{
    padding: 15px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5%;
}
.pic img{
    width: 168px;
}

`js`

window.onload = function(){
    watefall("main","box")
    window.onscroll =function(){
    //     <div class="box">
    //     <div class="pic"><img src="./images/16.jpg"></div>
    // </div>
    var data = {
        arr:[
            {"src":"2.jpg"},
            {"src":"3.jpg"},
            {"src":"5.jpg"},
            {"src":"4.jpg"},
            {"src":"8.jpg"},
            {"src":"11.jpg"},
            {"src":"14.jpg"},
            {"src":"20.jpg"},
            {"src":"61.jpg"},
        ]

    }

    if(scrollTop()){
        for(var i=0;i<data.arr.length;i++){
            var main = document.getElementById("main");

            var oDiv = document.createElement("div");
            oDiv.className = "box";

            var oPic = document.createElement("div");
            oPic.className = "pic";

            var oImg = document.createElement("img")
            //加载图片
            oImg.src = "./images/"+data.arr[i].src+"";

            //加入
            main.appendChild(oDiv);
            oDiv.appendChild(oPic);
            oPic.appendChild(oImg);
            }
        }
        watefall("main","box")
    }
}


//判断是否到底了
function scrollTop(){
    var oBox = getClass("box");
    var last = oBox[oBox.length-1];
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientHeight ||document.documentElement.clientHeight;
    //最后一个图片的一半 + 它的top值 < 了 现在滑动的值 + 文档的高 就加载
    if(last.offsetHeight/2 + last.offsetTop < top + height){
        return true;
    }else{
        return false;
    }
}



function watefall(parent,box){
    var oParent = document.getElementById(parent);
    //main
    var oBox = getClass(box);
    //所有box
    var width = document.documentElement.clientWidth || document.body.width;
    //获取页面宽度
    var boxWidth = (oBox[0].offsetWidth);
    //获取box宽度
    var num = Math.floor(width/boxWidth);
    //可视区域一行能放入几张
    oParent.style.width = num*boxWidth+"px";

    var hrr = [];
    for(var i=0;i<oBox.length;i++){
        if(i<num){
           hrr.push(oBox[i].offsetHeight);
        }else{
            var min = Math.min.apply(null,hrr);
            var index = inArry(min,hrr)


            oBox[i].style.position = "absolute";
            oBox[i].style.left = index * boxWidth + "px";
            //图片摆放left值 下标×图片宽度
            oBox[i].style.top = min+"px";
            //图片摆放top值 最小值图片高度
            hrr[index] += oBox[i].offsetHeight;
            //原本的最小值 += 摆放在下面的值
        }
    }
}

//最小值下标
function inArry(min,hrr){
    for(var i=0;i<hrr.length;i++){
        if(hrr[i] == min){
            return i;
        }
    }

}

//获取class名称节点
function getClass(box){
    var reg = new RegExp("\\b"+ box + "\\b");
    var arr = [];
    var doms = document.getElementsByTagName("*");
    for(var i=0;i<doms.length;i++){
        if(reg.test(doms[i].className)){
            arr.push(doms[i]);
        }
        
    }
    return arr;
}

十七会紧张

发布了25 篇原创文章 · 获赞 0 · 访问量 208

私信关注

21 - JavaScript瀑布流

html

css

js

猜你喜欢

`html`

`css`

`js`