瀑布流

最新推荐文章于 2024-01-27 11:39:47 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-01-27 11:39:47 发布

阅读量137

点赞数

分类专栏：动画效果

本文链接：https://blog.csdn.net/Guoyu1_/article/details/86062410

版权

动画效果专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        #container{position: relative;}
        .box{padding: 5px;float: left;}
        .box_img{padding: 5px;border: 1px solid #ccc;box-shadow: 0 0 5px #ccc;border-radius: 5px;}
        .box_img img{width: 150px;height: auto}
    </style>
</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>
<script>
    window.onload=function () {
        imgLocation("container","box");
        var imgDate={"data":[
            {"src":"2.jpg"},
            {"src":"3.jpg"},
            {"src":"4.jpg"},
            {"src":"5.jpg"},
            {"src":"6.jpg"},
            {"src":"7.jpg"},
            {"src":"8.jpg"},
            {"src":"9.jpg"}
            ]};
        window.onscroll=function () {
            if(checkFlag()){
                var cparent=document.getElementById("container");
                for (var i=0;i<imgDate.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/'+imgDate.data[i].src;
                        boximg.appendChild(img);
                }
                imgLocation("container","box");
            }
        }
    };
    function imgLocation(parent,content) {
        //将parent下的多个content全部取出
        var cparent=document.getElementById(parent);
        var ccontent=getChildElement(cparent,content);
        //console.log(ccontent);
        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;
                //console.log(BoxHeightArr[i])
            }else {
                var minHeight=Math.min.apply(null,BoxHeightArr);
                var minIndex=getminheightLocation(BoxHeightArr,minHeight);
                console.log(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;
    }

    //自动加载
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.clientHeight;//当前页面高度
    //console.log(pageHeight)
    if(lastContentHeight<scrollTop+pageHeight){
        return true;
    }


}
</script>
</body>
</html>

效果图：

前端路上迷茫的小鲨鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
瀑布流

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;瀑布流&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫

专栏目录