JavaScriptc瀑布流

最新推荐文章于 2024-10-06 20:02:57 发布

大帝依然在

最新推荐文章于 2024-10-06 20:02:57 发布

阅读量163

点赞数

分类专栏： JavaScript 文章标签： js瀑布效果

本文链接：https://blog.youkuaiyun.com/qq_39222965/article/details/80273752

版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript实现的瀑布流图片布局，并提供了无限滚动加载新图片的功能。通过调整图片盒子的位置属性，实现了动态的瀑布流效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果是一个页面很多图片排列，宽度相同

效果实例

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>美女瀑布</title>
        <link rel="stylesheet" href="css/css_瀑布.css" />
        <script type="text/javascript" src="js/js_瀑布.js">

        </script>
    </head>
    <body>
        <div class="bigbox">
                <div class="box"><div class="img_box"><img src="img/1.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/2.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/3.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/4.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/5.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/6.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/7.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/8.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/9.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/10.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/11.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/12.jpg"/></div></div>
                <div class="box"><div class="img_box"><img src="img/13.jpg"/></div></div>


        </div>
    </body>
</html>

css部分

*{
    margin: 0;
    padding: 0;
}
.bigbox{
    position: relative;
}
.box{
    padding: 5px;
    float:left ;
}
.img_box{
    padding: 5px;
    margin-right: 20px;
    border: 2px solid gainsboro;
    border-radius: 5px;
    box-shadow: 0 0 5px;
    }   
img{
    width: 250px;
    height: auto;
}

定量的图片瀑布js代码

window.onload=function(){   
    yidong();
}

function getimgMinhidth(harry){
    var min =Math.min.apply(null,harry);
    var index = harry.indexOf(min); 
    return index
    }
function getheight(){
    var $box = document.getElementsByClassName('box');
    var harry =[];
    for(var i =0;i<8;i++){
        harry[i]=$box[i].offsetHeight;
    }
    return harry
}
function yidong(){
    var $img = document.getElementsByTagName('img');
    var $box = document.getElementsByClassName('box');
    var harry =getheight();
    var $index = getimgMinhidth(harry);
    for(var i =8;i<$img.length;i++){
        $box[i].style.position='absolute';
        $box[i].style.top=harry[$index]+'px';
        $box[i].style.left=$box[$index].offsetLeft+'px';
        $box[$index].style.height= harry[$index]+'px';
        harry[$index] += $box[i].offsetHeight;
        $index = getimgMinhidth(harry);
    }

}

可以滚动一直产出图片的js代码

window.onload=function(){   
        yidong();
        window.onscroll= function(){
            if(checkflag()){
                var $big =document.getElementsByClassName('bigbox')[0];
                var imgdata =[];                                
                for(var i =1;i<15;i++){
                    //随机生成图片的 src
                    var num = parseInt(Math.random()*12+1);
                    imgdata[i]="img/"+num+".jpg";
                }
                for(var j =1;j<15;j++){
                    //创建节点及插入
                    var $cbox = document.createElement("div");
                    $cbox.className='box';
                    $big.appendChild($cbox);
                    var $cimgbox =document.createElement("div");
                    $cimgbox.className='img_box';
                    $cbox.appendChild($cimgbox);
                    var $cimg =document.createElement("img");
                    $cimg.src=imgdata[j];
                    console.log($cimg.src)
                    $cimgbox.appendChild($cimg);
                }   
                yidong();                   
    }
}
    }

function checkflag(){
    //判断滚轮是否滚到底部
    var $big = document.getElementsByClassName('bigbox');
    var $box = document.getElementsByClassName('box');
    var lasttop = $box[$box.length-1].offsetTop;
    //获取最后一个图片盒子的top值
    var scroll = document.documentElement.scrollTop;
    //获取滚轮的top值
    var pagetop = document.documentElement.clientHeight;
    //获取页面已浏览过的top值
    if(lasttop < (scroll +  pagetop)){
        return true
    }
}
function getimgMinhidth(harry){
    //获取前排那个盒子的所在高度最低数组的下标
    var min =Math.min.apply(null,harry);
    var index = harry.indexOf(min); 
    return index
    }
function getheight(){
    //获取前面8个盒子的所在高度数组
    var $box = document.getElementsByClassName('box');
    var harry =[];
    for(var i =0;i<8;i++){
        harry[i]=$box[i].offsetHeight;
    }
    return harry
}
function yidong(){
    //进行后面盒子的移动
    var $img = document.getElementsByTagName('img');
    var $box = document.getElementsByClassName('box');
    var harry =getheight();
    var $index = getimgMinhidth(harry);
    for(var i =8;i<$img.length;i++){
        $box[i].style.position='absolute';
        $box[i].style.top=harry[$index]+'px';
        $box[i].style.left=$box[$index].offsetLeft+'px';
        //通过定位移动盒子
        harry[$index]+=$box[i].offsetHeight;
        //移动完更新最低高度的盒子
        $index = getimgMinhidth(harry);
        //重新获取前排那个盒子的所在高度最低数组的下标

    }

}