原生js 实现的瀑布流

时间：2023-03-08 16:01:32
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>瀑布流</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

    <script src="js/app.js"></script>

</head>

<body>

<div id ="container">

    <div class="box">

          <div class="box_img" >

            <img src=".idea\img\2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/3.jpg">

        </div>

    </div>

    <div class="box">

        <div class=" box_img">

            <img src=".idea/img/9b7f759c4c0d6a4187b2902f33386e27.jpg">

        </div>

    </div>

    <div class="box">

        <div  class="box_img" >

            <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/20140821101515614.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/20140821101516903.jpg">

        </div>

    </div>

<div class="box">

    <div class="box_img">

        <img src=".idea/img/资源1.jpg">

    </div>

</div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/738b4710b912c8fc5d56e46cf8039245d78821ed.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/48540923dd54564ee758fb98b7de9c82d1584f55.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/u=4136129481,4024516763&fm=21&gp=0.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea\img\2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/20140821101516903.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/资源1.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/738b4710b912c8fc5d56e46cf8039245d78821ed.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/48540923dd54564ee758fb98b7de9c82d1584f55.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/u=4136129481,4024516763&fm=21&gp=0.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea\img\2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/3.jpg">

        </div>

    </div>

    <div class="box">

        <div class=" box_img">

            <img src=".idea/img/9b7f759c4c0d6a4187b2902f33386e27.jpg">

        </div>

    </div>

    <div class="box">

        <div  class="box_img" >

            <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/20140821101515614.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/20140821101516903.jpg">

        </div>

    </div>

    <div class="box">

        <div  class="box_img" >

            <img src=".idea/img/857ae43b321476e94252fad082292cce.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/14934c7fd0a6ea3a2272c8dd05ebe0a2.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img" >

            <img src=".idea/img/20140821101515614.jpg">

        </div>

    </div>

    <div class="box">

        <div class="box_img">

            <img src=".idea/img/20140821101516903.jpg">

        </div>

    </div>

</div>

</body>

</html>

js代码：

/**

 * Created by Administrator on 2015/5/23.

 */

window.onload=function() {

    imgLocation("container", "box");

    var imgDate={"date":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"资源1.jpg"},{"src":"9b7f759c4c0d6a4187b2902f33386e27.jpg"},{"src":"738b4710b912c8fc5d56e46cf8039245d78821ed.jpg"}]}

    window.onscroll = function () {

        if( checkFlag()) {

            var cparent = document.getElementById("container");

            for (var i = 0; i < imgDate.date.length; i++) {

                var ccontent = document.createElement("div");

                ccontent.className = "box";

                cparent.appendChild(ccontent);

                var boximg = document.createElement("div");

                boximg.className = "box_img";

                ccontent.appendChild(boximg);

                var img = document.createElement("img");

                img.src = ".idea/img/" + imgDate.date[i].src;

                boximg.appendChild(img);

            }imgLocation("container", "box");

        }

    }

}

function checkFlag() {

    var cparent = document.getElementById("container");

    var ccontainer = getChildElemtent(cparent, "box");

    var lastContentHeight = ccontainer[ccontainer.length - 1].offsetTop;

    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;

    if (lastContentHeight<scrollTop+pageHeight){

        return true;

    }

}

function imgLocation(parent,content) {

    var cparent = document.getElementById(parent);

    var ccontent = getChildElemtent(cparent, content);

    var imgWidth = ccontent[0].offsetWidth;

    var num = Math.floor(document.documentElement.clientWidth / imgWidth);

    cparent.style.cssText = "Width:" + imgWidth * num + "px;margin:0 auto";

    var boxHeightArr = [];

    for (var i = 0; i < ccontent.length; i++) {

        if (i < num) {

            boxHeightArr[i] = ccontent[i].offsetHeight;

        } else {

            var minheight = Math.min.apply(null, boxHeightArr);

            var minIndex=getminheightLocation(boxHeightArr,minheight);

            ccontent[i].style.position = "absolute";

            ccontent[i].style.top=minheight + "px";

            ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";

            boxHeightArr[minIndex]=boxHeightArr[minIndex]+ccontent[i].offsetHeight;

        }

    }

}

function getminheightLocation(boxHeightArr,minheight){

    for( var i in boxHeightArr)if (boxHeightArr[i] == minheight) {

        return i;

    }

}

function getChildElemtent(parent,content){

    var contentArr=[]

    var allcontent=parent.getElementsByTagName("*");

    for(var i = 0;i<allcontent.length;i++){

        if(allcontent[i].className==content) {

            contentArr.push(allcontent[i]);

        }

    }

    return contentArr

}

css代码：

*{

    margin: 0px;

    padding: 0px;

}

#container{

position: relative;

}

.box{

    padding: 5px;

    float:left ;

}

.box_img{

    padding: 5px;

    border: 1px;

    solid-color: #cccccc;

    box-shadow: #cccccc 0 0 5px;

    border-radius: 5px;

}

.box_img img{

    height:auto;

    width:150px

}

还是学生，写的可能都比较小白。

不过还是希望有个地方可以记录我的学习路径啦

以后写出的东西就放这里啦。

html代码：

相关文章