JavaScript瀑布流

最新推荐文章于 2022-05-12 09:59:45 发布

原创最新推荐文章于 2022-05-12 09:59:45 发布 · 339 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js瀑布流效果

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现瀑布流布局的方法，详细解释了如何通过计算每行图片数量、跟踪最矮图片的位置来达到动态填充的效果，并提供了完整的HTML和JS代码示例。

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

js瀑布流原理：

1、计算一行能放几张图片，假如为num（当前可视区宽度 / 图片宽度（这里图片宽度是规定好的一个固定值，所有图片宽度一样））

2、获取一行中最矮的那张图片，让第索引号大于num的图片放到最矮的图片后面

3、当当前可视区域高度加上滚动条滚动高度大于最后一张图片距离顶部的高度时再加载其他图片，其他图片的加载就是重复上面的步骤

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        #container {
            position: relative;
        }
        .box {
            padding:5px;
            float: left;
        }
        .img-box {
            padding:5px;
            border:1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
            border-radius:5px;
            overflow: hidden;
        }
        .img-box img {
            width: 150px;
            height:auto;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>

    <div class="box">
        <div class="img-box">
            <img src="images/1.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/left.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/2.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/free_03.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/004.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/05.jpg" alt="">
        </div>
    </div>
    <div class="box">
        <div class="img-box">
            <img src="images/005.jpg" alt="">
        </div>
    </div>


</div>
<script>
    window.onload = function(){
        var container = document.getElementById("container");
        var Imgs = getChildEle(container,"box");
        imgLocation(Imgs);
        var imgData = {"data":[{"src":"jd1.png"},{"src":"jd2.png"},{"src":"right.png"},{"src":"rss.png"},
            {"src":"search.jpg"},{"src":"mi.png"},{"src":"cloud.gif"}]}   // 模拟后台的数据
        window.onscroll = function(){
            var flag = loadFlag();
            if(flag){
                for(var i = 0; i < imgData.data.length; i++){
                    var Box = document.createElement("div");
                    Box.className = "box";
                    container.appendChild(Box);
                    var imgBox = document.createElement("div");
                    imgBox.className = "img-box";
                    Box.appendChild(imgBox);
                    var img = document.createElement("img");
                    img.src = "images/"+ imgData.data[i].src;
                    imgBox.appendChild(img);
                }
                var NewImgs = getChildEle(container,"box");
                console.log(NewImgs.length)
                imgLocation(NewImgs);
            }
        }
//        获取所有图片盒子
        function imgLocation(imgs){
            var imgWidth = imgs[0].offsetWidth;
            var colsNum = Math.floor(client().width / imgWidth)  //  一行能放的图片张数
            container.style.cssText = "width:" + imgWidth * colsNum+ "px;margin: 0 auto";  // 设置最大容器的宽度
            var len = imgs.length;
            var imgsBoxHeight = [];
            for(var i = 0; i < len; i++){
                if(i < colsNum){
//                    只获取一行中所有图片盒子的高度
                    imgsBoxHeight[i] = imgs[i].offsetHeight;
                }else{
                    var minHeight = Math.min.apply(null,imgsBoxHeight);  // 获取一行盒子中最小高度
                    var minIndex = getminBoxIndex(imgsBoxHeight,minHeight)  // 获取一行盒子中最小高度盒子的索引
                    imgs[i].style.position = "absolute";
                    imgs[i].style.top = minHeight + "px";
                    imgs[i].style.left = imgs[minIndex].offsetLeft + "px";
                    imgsBoxHeight[minIndex] = imgsBoxHeight[minIndex] + imgs[i].offsetHeight;  //  重新给最小盒子赋值高度，此时最小盒子的高为他自身高加上拼接在它后面的盒子高度和
                }
            }
        }
        function getChildEle(parent,content) {   //  获取所有的图片盒子
            var imgsBox = [];
            var allImgs = parent.getElementsByTagName("*");
            for(var i = 0; i < allImgs.length; i++){
                if(allImgs[i].className == content){
                    imgsBox.push(allImgs[i]);
                }
            }
            return imgsBox;
        }
        function client() { // 获取可视区的宽高兼容方法
            if(window.innerWidth != null){
                return {
                    width: window.innerWidth,
                    height: window.innerHeight
                }
            }
            else if(document.compatMode === "CSS1compat"){
                return {
                    width: document.documentElement.clientWidth,
                    height: document.documentElement.clientHeight
                }
            }
            else{
                return {
                    width: document.body.clientWidth,
                    height: document.body.clientHeight
                }
            }
        }
        function getminBoxIndex(imgsBoxHeight,minHight){
            for(var i in imgsBoxHeight){
                if(imgsBoxHeight[i] == minHight) {
                    return i
                }
            }
        }
        function loadFlag(){  //  控制下拉是否加载图片
            var imgs = getChildEle(container,"box");
            var lastImgHeight = imgs[imgs.length-1].offsetTop;
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            var pageHeight = client().height;
            if(lastImgHeight < scrollTop + pageHeight){
               var flag = true;
            }
            return flag;
        }
    }
</script>
</body>
</html>