JQuery实现瀑布流布局

已于 2022-07-24 00:24:25 修改
阅读量782 收藏 3
点赞数 1
分类专栏： JQuery 文章标签： 前端开发 JavaScript JQuery
于 2019-08-10 11:37:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40629244/article/details/99062690
版权

分享一个基于JQuery实现的瀑布流布局，效果如下： 

实现代码如下，欢迎大家复制粘贴。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>基于JQuery实现的瀑布流布局案例</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        #main {
            position: relative;
        }

        .item {
            padding: 15px 0 0 15px;
            float: left;
        }

        .box {
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 0 6px #ccc;
            border-radius: 5px;
        }

        .box img {
            width: 162px;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="main">
        <div class="item">
            <div class="box">
                <img src="./images/1.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/2.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/3.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/4.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/5.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/6.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/7.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/8.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/9.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/10.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/11.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/12.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/13.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/14.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/15.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/16.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/17.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/18.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/19.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/20.jpg" />
            </div>
        </div>
        <div class="item">
            <div class="box">
                <img src="./images/21.jpg" />
            </div>
        </div>
    </div>

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>

    <script>
        $(window).on("load", function () {
            // 调用瀑布流函数
            waterfall('main', 'item');
            // 模拟json数据
            var result = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] };
            // 滚动加载
            window.onscroll = function () {
                // 判断是否具备加载剩余图片
                if (checkScroll()) {
                    // 遍历模拟的json数据得，得出下标和值
                    $.each(result.data, function (index, value) {

                        // 创建div添加class为item，添加到ID为main的div中
                        var $item = $('<div>').addClass('item').appendTo($("#main"));

                        // 创建div添加class为box，添加到class为item的div中
                        var $box = $('<div>').addClass('box').appendTo($item);

                        // 创建图片添加src属性添加到class为box的div中
                        $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($box);
                    });

                    // 调用瀑布流功能函数，让加载的图片按规则排列
                    waterfall();
                };
            }
        });

        // 瀑布流功能函数
        function waterfall(parent, item) {

            // 获取所有图片容器（含内边距)
            var $item = $("#main>div");

            // 获取其中一列的宽度 (outerWidth()可以获取padding值,width()无法获取)
            var itemWith = $item.eq(0).width();

            // 通过整个窗口的宽度除以单列的宽度得出多少列,并向下取整
            var num = Math.floor($(window).width() / itemWith);

            // 设置图片容器的宽度，并居中显示
            $("#main").css({
                'width:': itemWith * num,
                'margin': '0 auto'
            });

            // 存储每一行当中列的高度
            var itemHeightList = [];

            // 遍历所有的图片容器，得出下标和值
            $item.each(function (index, value) {

                // 将当前图片的高度存在itemHeight中
                var itemHeight = $item.eq(index).height();

                // 如果图片容器的下标小于当前的列数,即只有一行
                if (index < num) {

                    // 将第一行每一张图片的高度存在数组中
                    itemHeightList[index] = itemHeight;

                } else {

                    // 通过Math.min.apply求出数组itemHeightList（第一行）中高度的最小值 
                    var minHeight = Math.min.apply(null, itemHeightList);

                    // 通过inArray（判断的值,所在数组）得出高度最小那张图片的下标
                    var minHeightIndex = $.inArray(minHeight,itemHeightList);

                    // 设置剩余图片的样式,value为Dom对象，要将其转换为JQuery对象
                    $(value).css({
                        // 绝对定位
                        'position': 'absolute',
                        // top值 
                        'top': minHeight + 15,
                        // left值为第一行中高度最小图片的left值
                        'left': $item.eq(minHeightIndex).position().left
                    });
                    // 设置每一行中高度最小那一列的高度等于该列剩余图片高度的累加
                    itemHeightList[minHeightIndex] += $item.eq(index).height() + 15;
                }
            });
        }

        // 封装函数，检验是否需要加载图片
        function checkScroll() {

            // 获取所有图片容器（含内边距)
            var $item = $("#main>div");

            // 将最后一张图片的top值加上该图片自身高度的一半存为变量lastItemHeight中
            // 注意last()获得的是一个数组,通过get(0)获得第一个
            var lastItemHeight = $item.last().get(0).offsetTop + Math.floor($item.last().height() / 2);

            // 获取页面滚动的距离
            var scrollTop = $(window).scrollTop();

            // 获取屏幕高度
            var documentHeight = $(document).height();

            // 当lastItemHeight小于页面滚动距离与屏幕高度之和时,返回true，具备加载条件，否则返回false，不具备
            return (lastItemHeight < scrollTop + documentHeight) ? true : false;
        }

    </script>
</body>

</html>

aiguangyuan
关注
专栏目录
用jQuery完成瀑布流布局
yongxiqianduan的博客
04-07 498
页面的瀑布流布局。使用jQuery框架，用HTML、CSS、JS、AJAX、DOM等共同配合完成。
jQuery实现瀑布流布局
10-25
瀑布流布局是一种流行的网页布局...以上知识点详细说明了如何使用jQuery实现瀑布流布局，包括了HTML结构的设计、CSS样式的编写、JavaScript逻辑的处理以及事件的绑定，涵盖了瀑布流布局从基础到高级应用的方方面面。
制作图片瀑布流布局：使用jquery masonry插件
最新发布
weixin_42509507的博客
08-27 1028
本文还有配套的精品资源，点击获取 简介：瀑布流布局是网页设计中用于展示图片的流行方式，jQuery Masonry是实现该布局的流行JavaScript插件。本文将介绍jQuery Masonry的工作原理及其在图片瀑布流布局中的应用，包括如何初始化插件、配置布局选项以及处理动态内容。此外，文章还将探讨性能考虑和可能的替代布局方法。 1. 瀑布流布局概念及应用 ...
jQuery瀑布流（一看就懂）
weixin_60659070的博客
10-11 2474
瀑布流可以使用JavaScript实现，今天我把使用jQuery方法实现瀑布流分享出来，供大家参考。 什么是瀑布流？ 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 准备工作： 工具：Visual Studio Code HTMl页面（waterfall.html文件） css文件（waterfall.css文件） js文件（waterfall.js文件） ...
jquery瀑布流
UNDEFINED_AUBE的博客
12-22 472
宽相等高不相等 计算出当前排高度最小的那一个，下面继续放置图片 当当前页面图片内容不够显示的时候要继续加载新的图片
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）...
jQuery实现响应式瀑布流效果（jQuery+flex）
觉醒法师的专栏
05-29 3032
瀑布流原理：是一种常见的网页布局方式，它的特点是将内容以多列的形式呈现，每一列的内容高度不固定，根据内容的大小自适应调整，从而形成了像瀑布一样的流动效果。瀑布流的实现原理涉及到数据加载、布局设计、图片加载和响应式设计等方面，需要综合考虑各个方面的因素，以实现高效、流畅、美观的瀑布流效果。目前网上很多技术博文是使用定位完成瀑布流效果的，这里将使用jquery和flex布局来实现响应式瀑布流效果。
JQ 用最少代码实现瀑布流布局
06-08
NULL 博文链接：https://onestopweb.iteye.com/blog/2328282
jq实现瀑布流布局
qq_41855739的博客
02-16 488
jq实现瀑布流布局 效果图预览
jQuery瀑布流
qq_41839784的博客
04-25 167
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding:...
jQuery实现瀑布流
hexadecimal_001的博客
05-25 603
以上代码通过jQuery实现了一个简单的瀑布流效果，页面加载时显示初始数据，当滚动到页面底部时加载更多数据。通过不断向页面末尾添加数据，实现了瀑布流的效果。您可以根据实际需求更改样式和数据内容。
jquery实现可轮播的瀑布流效果
Amouzy的博客
06-24 499
案例效果： 先实现瀑布流，然后再实现向上无缝轮播。其中瀑布流实现步骤如下： 1、确定图片的宽度 - 滚动条宽度 2、用相对定位来确定第一行按序布局 3、用数组来放各列累加的高度，以相对定位来确定其他行的布局。其中top值就是最小列的高度加上间距。向上无缝轮播主要是利用margin-top的递减来实现向上滚动。当滚动完后再赋值为0重新滚动。...
jQuery实现动态瀑布流布局效果
陈春春的技术博客
02-02 1884
0x01 前言今天在tumblr上看到其瀑布流布局，如下图，觉得很有意思便研究了下，发现tumblr使用position:absolute布局的。照我之前的想法呢，是根据窗口大小，建立N条Col，然后依次将item append到col中。这样成本会小很多，因为只需要写好col的css即可：float:left或display:inline-block。0x02 代码编写HTML，CSS结构很简单，
jquery实现瀑布流布局
jwx1234的博客
06-03 339
文章目录前言效果实现 前言 实现瀑布流列表布局，要求（列表项高度不统一，每次换行都优先补全上一行） 提示：以下是本篇文章正文内容，下面案例可供参考 效果 最终效果实现的效果 实现 先导入jquery css .now{display:flex;justify-content:space-between;padding:0 12px;} .list{width:45vw;} .list li{margin-bottom:8px;width:100%;border-radius:5px;background
jQuery实现瀑布流布局深度解析与实例演示
本文将引导读者通过实际的代码示例和理论分析，了解如何利用jQuery实现瀑布流布局，包括布局算法、性能优化以及如何结合JavaScript和CSS来实现流畅的用户体验。适合前端开发者和希望学习新技巧的设计师参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

aiguangyuan

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

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

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

打赏作者

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

抵扣说明：

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

余额充值