用js实现图片自动加载的瀑布流效果

时间：2016-04-12 14:10:57 阅读：156 评论：0 收藏：0 [点我收藏+]
标签：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="waterfall.css" type="text/css">
    <script src="waterfall.js"></script>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        #content{
            position: relative;
            background-color: #006000;
        }
        .box{
            padding: 5px;
            float: left;
        }
        .box_img{
            padding: 5px;
            border: 1px solid #cccccc;
            box-shadow: 0 0 5px #cccccc;
            border-radius: 5px;
        }
        img{
            width: 150px;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="content">
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/kitten-medium.png">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/kitten-medium.png">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/kitten-medium.png">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/kitten-medium.png">
            </div>
        </div>
      
    </div>
    <script>
        /**
         * Created by asua on 2016/4/9.
         */
        window.onload=function(){
            imgLocation("content","box");
            var lodeImage={"Date":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"10.jpg"},]}
            window.onscroll=function(){
                if(checkFlag()){
                    for(var i=0;i<lodeImage.Date.length;i++){
                        var box=document.createElement("div");
                        box.className="box";
                        var cparent=document.getElementById("content");
                        cparent.appendChild(box);
                        var box_img=document.createElement("div");
                        box_img.className="box_img";
                        box.appendChild(box_img);
                        var img=document.createElement("img");
                        img.src="Img/"+lodeImage.Date[i].src;
                        box_img.appendChild(img);
                    }
                    imgLocation("content","box");
                }
            }
        }
        function checkFlag(){
            var cparent=document.getElementById("content");
            var ccontent=getChildElement(cparent,"box");
            var lastContentHeight=ccontent[ccontent.length-1].offsetTop;
            var scrollHeight=document.documentElement.scrollTop||document.body.scrollTop;
            var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;
            console.log(lastContentHeight+":"+scrollHeight+":"+pageHeight);
            if(lastContentHeight<scrollHeight+pageHeight){
                return true;
            }
        }
        function imgLocation(parent,child){
            var cparent=document.getElementById(parent);
            var ccontent=getChildElement(cparent,child);
            var imgwidth=ccontent[0].offsetWidth;
            var cols=Math.floor(document.documentElement.clientWidth/imgwidth);
            cparent.style.cssText="width:"+imgwidth*cols+"px;margin:30px auto";
            var heightArr=[];
            for(var i=0;i<ccontent.length;i++){
                if(i<cols){
                    heightArr.push(ccontent[i].offsetHeight);
                }else{
                    var minHeight=Math.min.apply(null,heightArr);
                    var minIndex=getMinIndex(heightArr,minHeight);
                    ccontent[i].style.position="absolute";
                    ccontent[i].style.top=minHeight+"px";
                    ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
                    heightArr[minIndex]+=ccontent[i].offsetHeight;
                }
            }
        }
        function getMinIndex(heightArr,minHeight){
            for(var i=0;i<heightArr.length;i++){
                if(heightArr[i]==minHeight){
                    return i;
                }
            }
        }
        function getChildElement(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;
        }
    </script>
</body>
</html>
用js实现图片自动加载的瀑布流效果
标签：
原文地址：http://www.cnblogs.com/binmengxue/p/5382411.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行