JavaScript瀑布流

关注

原创最新推荐文章于 2026-03-31 10:11:24 发布 375 阅读 AI 写同款· GEO 优化 ›

流式布局之javascript实现照片瀑布流以及Macy.js插件实现瀑布流提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录瀑布流的定义一、实现效果代码首先是用javascript自己手写代码实现照片瀑布流使用插件Mary.js照片流插件实现照片瀑布流总结瀑布流的定义瀑布流是什么? 1、琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。 2、唯美：图片的风格以唯美的图片为主。 3、操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前有一个软件叫瀑布流。 4.瀑布流又称瀑布流式布局，是比较流行的一种网站页阅读详情

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>

收录于