JavaScript瀑布流

最新推荐文章于 2022-05-12 09:59:45 发布
原创 最新推荐文章于 2022-05-12 09:59:45 发布 · 339 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js瀑布流效果

本文介绍了一种使用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>


JavaScript瀑布流的实现
bhegi_seg的博客
03-08 136
瀑布流的核心 1, 根据 ajax请求的响应体结果 动态渲染生成页面 请求地址 请求方式 参数键名 都是 后端程序定义的 前端 只能根据需求 定义 携带的具体的参数数据 响应体数据是后端程序返回的数据结果 只能获取数据结果 不能修改数据结果 可以根据 响应体数据结果 动态渲染生成页面内容 可以使用 三元运算符 给标签定义属性等 2, 瀑布流 再次 发起请求的判断依据 上卷高度 + 视窗窗口高度 + 预留高度 > 最矮ul占位高度 3, 函数的节流 同时触发 多次执行 相同的函数程序 只需要触发执行
【JavaScript】瀑布流布局
等时钟成长
07-13 1977
瀑布流布局
JavaScript 瀑布
司马懿的西山居
01-25 1204
<!DOCTYPE html> <html> <head> <meta charset="utf8"> <meta http-equiv=“X-UA-Compatible” content="IE-edge, chrome=1"> <meta name="viewport" content="width=device-width, initia
原生 JavaScript 瀑布流
weixin_68903201的博客
05-12 96
原生 JavaScript 瀑布流原生 JavaScript 瀑布流
JavaScript瀑布流布局效果
qq_45216853的博客
04-18 170
瀑布流 根据可视窗口进行变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
CSS3&JavaScript 瀑布流
司马懿的西山居
11-28 1363
实现方法概述 html页面要实现瀑布流，目前有两种方案，它们的适用场景不同 CSS3 的 column-count（适用于所有元素一次性加载，页面更新用分页来实现，且元素与位置依赖度不高的传统布局上） CSS2 的 flot 配合 JavaScript 动态测量（适用于所有元素分批加载，滑动到底部自动添加下一批元素的情况） 当然，网上还有介绍 CSS3 的 grid 方案，很可惜，目前为止，所...
javascript 瀑布流
莱茵金属
03-09 856
现在图片网与商城流行一种叫“瀑布流”的布局，我们公司也不小心得了“流行性感冒”，要搞这个。于是我就写了一个，现在再用我的框架mass重写一下，发布出来，顺便宣传一下我的框架。 瀑布流其实没什么东西，就是列布局与无限拖的结合。由于要支持IE6就没有CSS3，直接对列进行绝对定位。列就是一个DIV。然后就是列中每个板块的添加问题，我管它为砖头。每添加一块砖头前，比较一下哪列最短，就往哪里塞。最后就是
javascript实现瀑布流
weixin_44456354的博客
12-28 94
javascript实现瀑布流 html、css部分 图片部分可自己上网找 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" c
JavaScript瀑布流的实现以及底部刷新
gxf_ming的博客
03-24 486
JavaScript瀑布流的实现以及底部刷新  分类： 前端学习笔记（4）  版权声明：本文为博主原创文章，未经博主允许不得转载。 通过使用JavaScript来实现瀑布流，我们可以对JS了解的更加深刻。 我们知道在不使用浮动属性的时候，图片会按照在html代码里的顺序依次排列，而我们想要实现瀑布流，就应该把页面上每行都固定住，然后
案例十 、JavaScript瀑布流布局
热门推荐
csdn_zsdf的博客
04-05 1万+
先说一下什么是瀑布流布局。就是一堆等宽不等高的数据块组成的页面，如图： 现在好多网站都采用这种瀑布流布局，如蘑菇街。美丽说等等。 首先要实现它就要明白它是怎样排列的。 每一行的列数都是根据图片的宽度和页面的宽度算比例算下来的。。 第一行就是按顺序排列，其他的数据块都是在每一列中挑选出最低的那一列依次排进去的。首先实现框架。<div id = "main"> <div class
javascript瀑布流布局实现方法详解
10-22
总的来说，实现JavaScript瀑布流布局需要理解HTML结构、CSS样式以及JavaScript事件和DOM操作。通过对元素的动态布局和数据的实时加载，我们可以创建出一个既美观又响应式的瀑布流布局。这种布局方法在博客、产品展示...
JavaScript瀑布流布局实现代码
10-19
JavaScript瀑布流布局是一种常见的网页设计布局方式，常用于展示大量且尺寸不一的内容，如图片、文章摘要等。它的特点是内容元素（如图片）在页面上以多列的形式呈现，每列的高度根据其中元素的最高内容自适应，形成...
Javascript瀑布流
03-18
JavaScript瀑布流是一种网页布局方式，它使得网页元素（通常是图片或卡片式内容）在垂直方向上像瀑布一样连续排列，每个元素的宽度一致，而高度则根据内容自适应，形成一种错落有致的视觉效果。这种布局在新闻网站、...
JavaScript 瀑布流 吸顶 兼容IE FF Chrome
07-04
JavaScript瀑布流布局是一种常见的网页设计模式，常用于展示图片或者文章列表，使它们自适应不同屏幕尺寸，呈现出一种像瀑布一样流动的效果。这种布局方式在响应式设计中尤其受欢迎，因为它能够有效地利用有限的空间...
源生js轮播图组件
wp7021的博客
01-30 1714
原生javascripts 轮播图 一、无缝滚动轮播图 无缝滚动 *{ margin:0; padding:0; } .box { width: 600px; height: 200px;
数组常用方法和属性
wp7021的博客
01-31 840
数组常用属性和方法 一、常用属性 1、length 使用length 应该注意的问题 （javascript 很容易因为length 的问题导致整个数组的长度修改） 1、对 arr 的length 赋值会导致 arr修改 例：  var arr1 = [1,3,5,14,24]; var arr2 = [1,3,5,7,9]; arr1.length = 7 arr2.len
JavaScript的innerWidth与innerHeight
wp7021的博客
01-30 630
JavaScript的innerWidth与innerHeight 这两个属性是window对象的只读属性,声明了窗口的文档显示区的高度和宽度，以像素(px)为计量单位。 (注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度) 兼容写法：   function client() { if (window.innerWidth != null) {
javascript知识碎片
wp7021的博客
01-30 609
这里记录下一些js容易忘的知识 1、乘方和开根号 Math.pow(a,b)      →        a的b次方 Math.sqrt(a)          →       a开方 2、用户输入 prompt就是专门用来弹出能够让用户输入的对话框的，但必须要用一个变量来接受用户输入的值 例： var a = prompt("请输入内容")结果： 3、docu
简易JavaScript瀑布流布局示例
### JavaScript 瀑布流实现原理： 在Web前端开发中，要实现瀑布流布局，主要涉及到以下几个关键技术点： 1. **动态计算布局：**首先需要通过JavaScript来动态计算每一列的高度，这是瀑布流布局的基础。需要遍历...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值