Javascript学习笔记--瀑布流

最新推荐文章于 2019-09-18 00:42:51 发布

thystar

最新推荐文章于 2019-09-18 00:42:51 发布

阅读量508

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/47792229

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

js代码：

/**
 * Created by Sindy on 2015/8/19.
 */
window.οnlοad=function(){
    imagelocation("container", "box");
    // 创建JSON结构，模拟加载的图像
    var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"}]}
    //当滚动条滚动到页面底部时自动加载图像
    window.onscroll = function(){
        //checkFlag();
        //创建节点
        if(checkFlag()){
            var cparent = document.getElementById("container");
            for(var i=0;i<imgData.data.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 = "img/"+imgData.data[i].src;
                boximg.appendChild(img);
            }
            imagelocation("container", "box");
        }
    }
}

// 计算滚动条底部，当滚动条触底时加载图像
function checkFlag(){
    var cparent = document.getElementById("container");
    var ccontent = getChildElement(cparent, "box");
    var lastContentHeight = ccontent[ccontent.length-1].offsetTop;
    //console.log(lastContentHeight);
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    //console.log(scrollTop);
    var pageHeight = document.documentElement.clientHeight||document.body.scrollHeight;
    //console.log(lastContentHeight+";"+scrollTop+";" +pageHeight);
    if(lastContentHeight < scrollTop+pageHeight){
        return true;
    }
}


// 瀑布流核心：计算图像的高度，向指定位置加载图像；
function imagelocation(parent, content){
    //将父级空间的内容全部取出
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent, content);
    //console.log(ccontent);
    var imgWidth = ccontent[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth/imgWidth);
    cparent.style.cssText = "width:" + imgWidth*cols+"px;margin:0 auto";

    var BoxHeightArr = [];
    // 计算图片插入位置：找到高度最小的图片插入，然后将插入图片后的高度加入该位置，继续循环；
    for(var i=0; i<ccontent.length;i++){
        if(i<cols){
            BoxHeightArr[i] = ccontent[i].offsetHeight;
            //console.log(BoxHeightArr[i]);
        }else{
            var minHeight = Math.min.apply(null, BoxHeightArr);
            //console.log(minHeight);
            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 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;
}

css代码：

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

#container{
   position: relative;
}

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

.box_img{
    padding: 5px;
    border: 1px solid #CCCCCC;
    box-shadow: 0 0 5px #CCC;
    border-radius: 5px;
}

.box_img img{
    width: 150px;
    height: auto;
}

html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/style.css" type="text/css" rel="stylesheet">
    <script src="js/app.js"></script>
</head>
<body>
    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="img/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/7.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/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/7.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/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/7.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/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/7.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/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/7.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/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="img/7.jpg">
            </div>
        </div>
    </div>
</body>
</html>

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript学习笔记--瀑布流

js代码：/** * Created by Sindy on 2015/8/19. */window.onload=function(){ imagelocation("container", "box"); // 创建JSON结构，模拟加载的图像 var imgData = {"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"s
复制链接

扫一扫

专栏目录