jQuery实现瀑布流布局

最新推荐文章于 2024-08-27 15:49:16 发布
最新推荐文章于 2024-08-27 15:49:16 发布
阅读量114 收藏
点赞数
分类专栏： 笔记 文章标签： jquery html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46643055/article/details/120537983
版权
本文详细解析了一段JavaScript代码，用于实现瀑布流布局。首先获取容器宽度和图片盒子宽度，然后计算每行能放置的图片数量。接着通过遍历图片，分别处理第一行和其他行的图片放置，动态调整图片位置，使其呈现出瀑布流效果。代码中使用了jQuery库，并注重了CSS样式设置，确保布局的正确呈现。
摘要由CSDN通过智能技术生成

实现过程

 

  1. 封装获取函数（注意：不要忘记调用）
  2. 获取容器（浏览器可视页面）宽度-cw（只需获取自身真实宽度即可）
  3. 获取图片所在小盒子宽度-aw（需获取包含边框+内外边距+自身宽度）
  4. 获取每行存储图片的个数cw/aw
  5. 声明一个空数组放置图片位置
  6. 确定第一行图片所在位置      
  7. 遍历 获取each（function（index，domobj）{}）  //index代表图片索引，domobj     代表当前选中图片
  8. 存储图片高度 imgArr.push($(domobj).outerHeight(true))
  9. 放置其它图片
  10. 确定第一行放置图片的最小高度minHeight = Math.min.arr(null,imgArr)
  11. 确定最小高度图片的位置minIndex = imgArr.indexOf(minHeight)
  12. 更新图片位置 imgArr[minIndex] += $(domobj).outerHeight(true)

   注：在设置css样式时要注意给图片所在盒子设置定位，js要引入函数库 

手写笔记 

 js代码

<script>
        window.onload = function(){


            /**
             * 瀑布流函数
             */
            function fn(){
                // 获取容器宽度
                var $cw = $("#container").width()
                // 获取图片盒子宽度
                var $aw = $(".album").eq(0).outerWidth(true)

                // 一行能放置多少张图片
                var _col = Math.floor($cw/$aw)

                console.log(_col,"一行放置图片数")
                // 放置图片
                var imgArr = []
                // 遍历循环
                $(".album").each(function(index,domobj){
                    // 第一行放置
                    if(index < _col){
                        $(domobj).css({
                            left:index * $aw,
                            top:0    
                        })
                        imgArr.push($(domobj).outerHeight(true))
                    }else{
                        // 剩下的图片放置
                        // 获取第一行图片最小高度
                        var _minHeight = Math.min.apply(null ,imgArr)
                        // 获取第一行图片最小高度的位置
                        var _minIndex = imgArr.indexOf(_minHeight)
                        $(domobj).css({
                            left : _minIndex * $aw,
                            top: _minHeight

                        })
                        imgArr[_minIndex] += $(domobj).outerHeight(true)

                    }
                })
            }
            fn()
        }
    </script>

     完整代码：

<!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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            position: relative;
        }
        .album{
            width: 200px;
            height: auto;
            border: 1px solid;
            border-radius: 5px;
            padding: 5px;
            box-shadow: #888 0 0 3px;
            position: absolute;
            margin: 5px;
        }
        img{
            width: 200px;
            height: auto;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
        <div class="album"><img src="./images/x (17).jpg" alt=""></div>
        <div class="album"><img src="./images/x (18).jpg" alt=""></div>
        <div class="album"><img src="./images/x (19).jpg" alt=""></div>
        <div class="album"><img src="./images/x (20).jpg" alt=""></div>
        <div class="album"><img src="./images/x (21).jpg" alt=""></div>
        <div class="album"><img src="./images/x (22).jpg" alt=""></div>
        <div class="album"><img src="./images/x (23).jpg" alt=""></div>
        <div class="album"><img src="./images/x (24).jpg" alt=""></div>
        <div class="album"><img src="./images/x (25).jpg" alt=""></div>
    </div>

    <script src="./js/libs/jQuery/jquery.js"></script>
    <script>
        window.onload = function(){
            function fn(){
                // 获取容器宽度  width 自身实际宽度不包含边框和内外边距
                var $cw = $("#container").width()
                // 获取图片盒子宽度
                var $aw = $(".album").eq(0).outerWidth(true)

                // 一行放置多少照片
                var col = Math.floor($cw/$aw)
                console.log(col,"一行放置图片数 ")

                // 放置图片
                var imgArr = []
                // 遍历（循环）确定图片放置位置  里面index代表放置图片的索引  domobj代表当前选中的图片
                $(".album").each(function(index,domobj){
                    // 
                    if(index <col){
                        // 放置第一行图片
                        $(domobj).css({
                            // 当前图片距左边的距离  以便确定图片位置
                            left:index * $aw,
                            top:0
                        })
                        // 存储图片高度  outerHeight 图片的内外边距+边框+自身高度
                        imgArr.push($(domobj).outerHeight(true))
                    }else{
                        // 放置后续图片
                        // 获取第一行图片中高度最低的图片高度  ull无关紧要的参数，未使用就写null表示参数传值为空
                        var _minHeight = Math.min.apply(null,imgArr)
                        // 获取图片高度最小的那个位置  indexOf 查找
                        var _minIndex = imgArr.indexOf(_minHeight)

                        $(domobj).css({
                            left:_minIndex * $aw,
                            top : _minHeight
                        })

                        // 更新高度
                        imgArr[_minIndex] += $(domobj).outerHeight(true)
                    }
                })

            }
            fn()
        }
    </script>
</body>
</html>

Serendipiy_yyj
关注
专栏目录
JQ 瀑布流
08-13
NULL 博文链接：https://onestopweb.iteye.com/blog/2287430
jQuery实现响应式瀑布流效果（jQuery+flex）
觉醒法师的专栏
05-29 3001
瀑布流原理：是一种常见的网页布局方式，它的特点是将内容以多列的形式呈现，每一列的内容高度不固定，根据内容的大小自适应调整，从而形成了像瀑布一样的流动效果。瀑布流的实现原理涉及到数据加载、布局设计、图片加载和响应式设计等方面，需要综合考虑各个方面的因素，以实现高效、流畅、美观的瀑布流效果。目前网上很多技术博文是使用定位完成瀑布流效果的，这里将使用jquery和flex布局来实现响应式瀑布流效果。
制作图片瀑布流布局：使用jquery masonry插件
最新发布
weixin_42509507的博客
08-27 1002
本文还有配套的精品资源，点击获取 简介：瀑布流布局是网页设计中用于展示图片的流行方式，jQuery Masonry是实现该布局的流行JavaScript插件。本文将介绍jQuery Masonry的工作原理及其在图片瀑布流布局中的应用，包括如何初始化插件、配置布局选项以及处理动态内容。此外，文章还将探讨性能考虑和可能的替代布局方法。 1. 瀑布流布局概念及应用 ...
jQuery瀑布流（一看就懂）
weixin_60659070的博客
10-11 2458
瀑布流可以使用JavaScript实现，今天我把使用jQuery方法实现瀑布流分享出来，供大家参考。 什么是瀑布流？ 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 准备工作： 工具：Visual Studio Code HTMl页面（waterfall.html文件） css文件（waterfall.css文件） js文件（waterfall.js文件） ...
jQuery瀑布流
qq_41839784的博客
04-25 165
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding:...
jquery瀑布流
UNDEFINED_AUBE的博客
12-22 469
宽相等高不相等 计算出当前排高度最小的那一个，下面继续放置图片 当当前页面图片内容不够显示的时候要继续加载新的图片
Jquery实现瀑布流布局（备有详细注释）
01-19
本文实例讲述了Jquery实现瀑布流布局的方法。分享给大家供大家参考。具体如下： 瀑布流布局最近真的很流行，很多人都跟我一样想知道是怎么做出来的吧，经过网上搜索大量的参考结合N边的实验今天终于被我写出来了，...
基于jquery实现瀑布流布局
11-23
本文实例为大家介绍了基于jquery实现瀑布流布局的关键代码，分享给大家供大家参考，具体内容如下 效果图： 具体代码： 使用jquery-1.8.3.min.js，waterfall.js代码如下： $( window ).load( function(e){ ...
jQuery实现瀑布流布局详解（PC和移动端）
10-23
jQuery插件实现瀑布流布局的具体过程通常包括以下步骤： 1. 计算每行可容纳的元素个数：首先需要确定在当前视窗大小下，一行可以放置多少个容器元素。这需要获取容器元素的外部宽度（包括margin、padding和border）...
8.jQuery实现瀑布流
qq_44682019的博客
10-14 299
瀑布流是啥 只要你往下滚动，就会一直有内容出现，永远看不完。 实战瀑布流： 基本结构的结构层和表示层 瀑布流布局： js布局，jQuery布局，布局方式比较
jquery版瀑布流
weixin_30835649的博客
06-26 77
　　一个月前用jquery实现了瀑布流效果，看着当时的代码有点难过……今天抽时间稍微修改了一下。额，现在看起来不是那么难受了，就来和大家分享一下。废话不多说，开始正题~ 　　一、演示效果 　　二、html代码 <div class="header">header</div> <div class="box clearf...
jQuery实现瀑布流
hexadecimal_001的博客
05-25 595
以上代码通过jQuery实现了一个简单的瀑布流效果，页面加载时显示初始数据，当滚动到页面底部时加载更多数据。通过不断向页面末尾添加数据，实现了瀑布流的效果。您可以根据实际需求更改样式和数据内容。
自己用jQuery写一个瀑布流
FungLeo's Blog
10-16 4014
自己用jQuery写一个瀑布流前言这个月一直在忙工作。一直没有机会学习新的知识。前两天，突然想写一个瀑布流代码。倒不是找不到瀑布流代码。而是我想自己练练脑子。 首先，先考虑思路。所有的图片，全部采用相对父目录定位的方式。然后用jQuery来找出它应该排在什么位置。最终，达成瀑布流的效果。 想再多没用。开干。
jq实现瀑布流布局
Something的博客
07-04 2895
效果图：可以看到，除了第一行，接下来的图片都是添加在高度最低的那一列下面。因此我用了一个数组heightArr存放每一列的高度，每次选择高度最低的那列进行插入，随后更新当行列的高度。css： .box{ position: relative; margin: 0 auto; } .item{ position: absolute; ...
jquery实现瀑布流
qq_35146837的博客
01-20 293
jquery实现瀑布流
用 jQuery Masonry 插件创建瀑布流式的页面(转)
weixin_34130269的博客
10-18 86
瀑布流式的页面，最早我是在国外的一个叫 Pinterest 的网站上看到，这个网站爆发，后来国内的很多网站也使用了这种瀑布流方式来展示页面（我不太喜欢瀑布流这个名字）。 我们可以使用 jQuery 的 Masonry 插件来实现这种页面形式，下面介绍一下方法。 1，分别下载 jQuery 与 Masonry ，然后把他们都加载到页面中使用。 下载 jQuery 架构：http://jqu...
jQuery实现瀑布流布局深度解析与实例演示
本文将引导读者通过实际的代码示例和理论分析，了解如何利用jQuery实现瀑布流布局，包括布局算法、性能优化以及如何结合JavaScript和CSS来实现流畅的用户体验。适合前端开发者和希望学习新技巧的设计师参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值