原生js 实现的瀑布流 

<!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代码：

 

posted @ 2015-05-30 10:11  诗浓  阅读(135)  评论(0)  编辑  收藏  举报