javaScript 设置瀑布流布局

已于 2024-07-07 08:40:10 修改
阅读量746 收藏
点赞数
文章标签： javascript 前端 html
于 2023-01-11 18:00:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/o_osange/article/details/128648654
版权

效果要求：

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

实现原理：

先获取整个主页面的宽度，并定义变量 containerWidth 接收

获取每一张需要的图片用 imgs 储存，并设置每一个图片的宽度一致，定义变量 imgWidth 储存图片宽度

获取第一行的图片数量并定义变量 sum 储存，设置 sum = Math.floor(containerWidth / imgWidth)，使得展示效果可以根据分辨率的不同改变第一行图片的数量

创建数组 heightArr 储存第一行图片的宽度，使用 for循环 和 if判断 将前 sum 张图片的高度存入该数组

定义最小高度 minHeight 和最小高度图片的索引 minIndex ，在用另一个 for循环 和 if判断 更正最小高度和索引

再给后续的图片通过 imgs[i].style.position = "absolute" 加上定位

添加定位后通过 heightArr[minIndex] = heightArr[minIndex] + imgs[i].offsetHeight 再次修正数组里面的height

代码展示：

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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img1.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img2.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img3.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img4.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img5.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img6.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img7.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img8.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img9.webp" alt="">
        </div>
        <div class="box">
            <img src="./img/img10.webp" alt="">
        </div>
    </div>
    
    <script src="./index.js"></script>
</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

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"

            // 添加定位后再次修正数组里面的height
            heightArr[minIndex] = heightArr[minIndex] + imgs[i].offsetHeight
        }
    }
}

效果展示：

瀑布流布局展示

O_oregou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【JavaScript】瀑布流布局
等时钟成长
07-13 1559
瀑布流布局
原生JavaScript实现瀑布流布局
10-23
总的来说，这个原生JavaScript实现的瀑布流布局方案依赖于动态计算和绝对定位，它通过监听滚动事件，实现了页面滚动时内容的无限加载，同时保持了美观的瀑布流布局效果。这种方式相对于使用CSS Flexbox或Grid等现代...
html下拉加载数据,JS瀑布流下拉加载数据效果
weixin_35799467的博客
06-03 146
/p>瀑布流形式onebody {background: #ccc;padding: 0px;margin: 0px;}.box {width: 960px;margin: 0 auto;overflow: auto;}.childDom {background: #fff;transition: all .5s ease;}.childDom:hover {transform: scale...
jQuery实现瀑布流布局
solo_1108的博客
07-04 661
瀑布流布局 瀑布流，又称瀑布流式布局。 是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 布局效果 原理 瀑布流布局要求要进行布置的元素等宽 计算浏览器宽度与元素的宽度之比，得到列数 创建数组，存储每列元素总高度 each遍历循环各个图片，判断是否为第一排，若是，则将元素高度直接加入数组中，若不是，则定位布置到高度最小的一列，同时更新当前列的总高度。 jQuery获取元素宽度 在jQuery中，四种宽度 width()方
js实现流式布局
weixin_49074984的博客
10-17 941
1. CSS样式 /*使用通配符将内外边距都设置为零, 这样看着好看*/ * { margin: 0px; padding: 0px; } /*将主容器的布局方式设置为相对布局，一下方式可设置container为水平居中，详见：[https://blog.csdn.net/weixin_49074984/article/details/109128659] */
JS实现瀑布流布局
hexadecimal_001的博客
05-03 486
通过这种方式，我们可以实现一个简单的瀑布流布局，使页面内容以多列的方式动态排列。你可以根据实际需求调整列数和间距等样式来实现不同的效果。瀑布流布局是一种常见的网页布局方式，可以实现页面内容的动态排列，使页面看起来更加美观。在这个示例中，我们首先定义了一个包含图片链接的数组。元素作为每个图片的容器，并设置其样式为。
瀑布流布局JavaScript实现
Pioneer
04-18 196
html代码&lt;div id="content"&gt; &lt;!-- &lt;div&gt; &lt;img src="img/1.jpg"&gt; &lt;p&gt;人在社会上呆的久了,很容易会发生变化,比如我以前一直在想着如何发家致富，现在我只想着脱贫&lt;/p&gt; &lt;/div&gt; --&a
瀑布流布局
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
06-22 711
瀑布流布局瀑布流，又称瀑布流式布局。特点：等宽不等高,第二行的第一张图片要加载到第一行中最矮的图片的下面。
javascript瀑布流布局实现方法详解
10-22
总的来说，实现JavaScript瀑布流布局需要理解HTML结构、CSS样式以及JavaScript事件和DOM操作。通过对元素的动态布局和数据的实时加载，我们可以创建出一个既美观又响应式的瀑布流布局。这种布局方法在博客、产品展示...
JavaScript瀑布流布局实现代码
10-19
JavaScript瀑布流布局是一种常见的网页设计布局方式，常用于展示大量且尺寸不一的内容，如图片、文章摘要等。它的特点是内容元素（如图片）在页面上以多列的形式呈现，每列的高度根据其中元素的最高内容自适应，形成...
基于JavaScript实现瀑布流布局
10-23
主要介绍了原生JavaScript实现瀑布流布局的相关资料,实现鼠标下拉图片自动加载效果，和百度图片效果类似，需要的朋友可以参考下
javascript 原生瀑布流布局
05-16
该资源为纯html文件，下载后双击即可在浏览器打开。
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 463
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1285
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1069
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 154
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 101
【代码】vue el-select的下拉树形结构。
html瀑布流布局
06-02
实现瀑布流布局的关键在于CSS的样式设置和JavaScript的编程。以下是一个简单的HTML瀑布流布局代码示例： ```html <div class="item item-1">Item 1 <div class="item item-2">Item 2 <div class="item item-3">...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

O_oregou

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值