js实现瀑布流布局

已于 2023-01-18 00:44:14 修改
阅读量457 收藏
点赞数
文章标签： javascript 前端 开发语言
于 2023-01-17 23:52:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lishunyu1226/article/details/128721966
版权

js实现瀑布流布局

要求

多个等宽的图片进行穿插排序成六列，并且在目前显示的最后一张图片显示之后，再进行下拉时能够在进行加载其他图片，每次下拉显示20-30张图片。

原理

页面上也有多等宽的块（块就页面内容），每一块都是绝对定位（absolute），每个块排列的方式如下：寻找现在高度最小的列，把该块定位到该列下方

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221113230729_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300 (3).webp" alt="">
        </div>
        <div class="box">
            <img src="./20221209182724_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
        <div class="box">
            <img src="./20221210133951_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./20221209182715_1.jpg" alt="">
        </div>
        <div class="box">
            <img src="./300.webp" alt="">
        </div>
    </div>
</body>
</html>

css

* {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        .container {
            width: 100%;
            position: relative;

        }

        .box {
            float: left;
        }

        .box img {
            padding: 5px;
            width: 240px;
            height: auto;
        }

js

<script>
        window.onload = function () {
            //获取container
            var container = document.getElementsByClassName("container")
            //获取container的宽度
            var containerWidth = innerWidth

            // 获取每一张需要的图片
            var imgs = document.querySelectorAll("img")
            // 获取图片宽度
            var imgWidth = imgs[0].offsetWidth
            // 获取第一行的图片数量
            var sum = Math.floor(containerWidth / imgWidth)
            // 创建数组储存第一行图片的宽度
            var heightArr = []
            for (var i = 0; i < imgs.length; i++) {
                if (i < sum) {
                    // 存入第一行图片的高度
                    heightArr.push(imgs[i].offsetHeight)
                } else {
                    var minHeight = heightArr[0]
                    var minIndex = 0
                    for (var j = 0; j < heightArr.length; j++) {
                        if (heightArr[j] < minHeight) {
                            // 更正最小高度和索引
                            minHeight = heightArr[j]
                            minIndex = j
                        }
                    }
                    // 给后续图片加上定位
                    imgs[i].style.position = "absolute"
                    imgs[i].style.top = minHeight + "px"
                    imgs[i].style.left = imgs[minIndex].offsetLeft + "px"
                    heightArr[minIndex] = heightArr[minIndex] + imgs[i].offsetHeight
                }
            }
        }

    </script>

瀑布流布局

浪漫季
关注
原生JS实现瀑布流布局
越陌度阡
08-10 333
分享一个用原生JS实现的瀑布流布局，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JS实现瀑布流布局</title> <style> .........
JavaScript实现瀑布流布局
irishf的博客
04-17 216
在一些购物类网站上会看到一种诸如下图的类似瀑布流布局，这种布局的一个特点是每一个盒子的宽度相同，而高度却是任意的。 <div class="pic-box"> <div class="pic"> <img src="img/1.jpg" alt="1"> </div> </div>通过一个div.pic-box盒子来控制每个元素之间的间隔，div.pic来给元素添加
瀑布流布局实现
WUYOU798的博客
08-16 318
代码】瀑布流布局实现。
使用js写一个简单的【瀑布流】布局效果
最新发布
我们好像在哪见过 私
09-23 772
使用js写一个简单的【瀑布流】布局效果
[JavaScript] js 实现瀑布流布局
iChangebaobao的博客
12-31 201
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabl...
JS实现瀑布流布局
Amethyst的博客
05-18 513
瀑布流布局的特点：各元素等宽不等高 大概效果如下： 分析 通过定位布局 先确定在浏览器显示区域内，一行能放多少列图片 获取页面的宽度pageWidth（做兼容） 图片盒子宽度itemWidth 间隙gap 列数：column=pageWidth/(itemWidth+gap) 先排第一行 当盒子索引小于列数column的时候，就排在第一行 确定在第一行后，动态设置left的值,top值为0 left=i*(itemWidth+gap) 第一行排好之后，因为第二行需要考虑top值，将
微信小程序通过js实现瀑布流布局详解
12-08
在JavaScript实现瀑布流布局时，我们需要动态地计算每个元素的高度，然后根据两侧累计高度的比较来决定新元素应插入的位置。具体步骤如下： 1. **初始化**：定义两个变量`leftHeight`和`rightHeight`分别表示左右...
纯js实现瀑布流布局及ajax动态新增数据
10-22
通过纯JavaScript实现瀑布流布局和动态新增数据，可以不依赖于任何第三方库完成。这样的实现有利于减少页面加载的外部依赖，但在代码的组织和维护上可能会更加复杂。在实际开发中，可能还需要考虑浏览器兼容性、页面...
js实现瀑布流布局，针对大量的图片，动态加载数据.zip
04-08
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考...js实现瀑布流布局，针对大量的图片，动态加载数据.zip
js实现的瀑布流布局
weixin_34150830的博客
05-12 88
2019独角兽企业重金招聘Python工程师标准>>> ...
原生js实现瀑布流布局
qq_43427385的博客
09-11 141
实现效果就是这样 <style> *{ margin: 0; padding: 0; } .item{ text-align: center; font-size: 18px; position: absolut...
通过原生JS实现瀑布流布局
前端成长之路
11-01 356
关于瀑布流布局一、需要掌握的知识点 由于工作需要，花了几天时间研究瀑布流布局。该布局可以试用原生JS、JQuery、以及CSS3来实现，目前的工作场景不允许使用CSS3（主要是IE），所以本文主要针对原生JS。 一、需要掌握的知识点 window.onload，onload事件会在整个页面文档全部加载完成后执行 scrollTop、clientHeight、offsetHeight、offset...
JavaScript实现瀑布流布局详解
此外，现代前端框架如React或Vue.js提供了更高级的解决方案，如CSS Grid或Flexbox，它们可以更方便地实现瀑布流布局，同时避免了JavaScript的性能问题。 JavaScript实现的瀑布流布局是一种动态调整网页内容布局的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值