jQuery下的瀑布流效果（改）

最新推荐文章于 2018-01-06 17:49:47 发布
最新推荐文章于 2018-01-06 17:49:47 发布
阅读量715 收藏
点赞数 1
分类专栏： Web前端 文章标签： jquery 瀑布流效果 resize
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15096707/article/details/50638423
版权

使用$(window).on("resize", waterfall); 使得瀑布流列数可以动态变化。

包含加载数据的模拟。

useJQ.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流布局</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/scriptJQ.js"></script>
</head>
<body>
<div id="main">
    <div class="box">
        <div class="pic"><img src="images/1.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/2.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/3.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/4.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/5.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/6.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/7.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/8.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/9.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/10.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/11.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/12.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/13.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/14.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/15.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/16.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/17.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/18.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/19.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/20.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/21.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/22.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/23.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/24.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/25.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/26.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/27.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/28.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/29.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/30.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/31.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/32.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/33.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/34.jpg" alt=".jpg"></div>
    </div>

    <div class="box">
        <div class="pic"><img src="images/35.jpg" alt=".jpg"></div>
    </div>
</div>
</body>
</html>


style.css

* {
    margin: 0;
    padding: 0;
}

#main {
    position: relative;
}

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

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

.pic img {
    width: 165px;
    height: auto;
}


scriptJQ.js 

/**
 * Created by DreamBoy on 2016/2/4.
 */
$(window).on("load", function() {
    waterfall();

    var dataInt = {"data" : [
        {"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}
    ]};
    $(window).on("scroll", function() {
        if(checkScrollSlide()) {
            $.each(dataInt.data, function(key, value) {
                $box = $("<div>").addClass("box").appendTo($("#main"));
                $pic = $("<div>").addClass("pic").appendTo($box);
                $("<img>").attr("src", "images/" + value.src).appendTo($pic);
            });
            waterfall();
        }
    });

    $(window).on("resize", waterfall);
});

function waterfall() {
    var $boxs = $("#main>div");
    //求出每个盒子的宽度（包括内边距）
    var w = $boxs.eq(0).outerWidth();
    //求出当前窗口所能承载的瀑布流列数
    var cols = Math.floor($(window).width() / w);
    //设置容器的宽度
    $("#main").width(w*cols).css("margin", "0px auto");

    var hArr = []; //保存每一列的高度
    $boxs.each(function(index, value) {
        var h = $boxs.eq(index).outerHeight();

        if(index < cols) {
            $(value).removeAttr("style"); //移除style样式，配合 resize 事件（窗口变化时触发）

            hArr[index] = h;
        } else {
            //最小高度的列
            var minH = Math.min.apply(null, hArr);
            //最小高度的列在数组中的索引
            var minHIndex = $.inArray(minH, hArr);

            $(value).css({
                "position":"absolute",
                "top":minH,
                "left":minHIndex*w
            });

            hArr[minHIndex] += $(value).outerHeight();
        }
    });
}

function checkScrollSlide() {
    var $lastBox = $("#main>div").last();
    var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height() / 2);
    var scrollTop = $(window).scrollTop();
    var dh = $(window).height();
    return lastBoxH < scrollTop + dh;
}

在Chrome运行结果如下：


修改窗口宽度：


列数发生了动态变化；滚动条滚到底部，数据动态的加载，模拟网络加载图片：



葡萄干是个程序员
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
简单有效的jquery瀑布流效果
06-10
迅雷的一个工程师开发的瀑布流效果，简单易用 前面20张图片默认调用本地，后续无限加载的图片以及文字样式远程调用迅雷服务器图片 使用方法简单： 1、调用jquery库(一定要在瀑布流之前调用)； 2、调用js以及html文件...
用jquery实现瀑布流(方式1-固定宽度和列数，按顺序添加图片)
weixin_30692143的博客
09-25 174
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>瀑布流</title> <style type="text/css"> *{margin: 0;padding: 0} #c...
基于jQuery的瀑布流效果
boy599237255的博客
01-06 415
基于jQuery的瀑布流效果设计思想：利用元素的绝对定位来实现瀑布流效果。其中页面滚动到底部可以按需求加载更多，可以自定义每列的宽度，且可以通过改变页面的宽度来重置列数，且列数切换时通过动画过渡。实现代码： 1.css*{margin:0; padding:0;} body{background-color:#efefef;} ul,li{list-style: none;} .conta
jQuery网格瀑布流插件.zip
09-21
- **images**：存放示例页面所需的图片资源，用于展示瀑布流效果。 在实际项目中，开发者可以根据需求对“jQuery网格瀑布流插件”进行二次开发，比如增加新的动画效果，优化性能，或者与其它jQuery插件集成，实现更...
深入探秘jquery瀑布流的实现
10-22
【jQuery瀑布流实现详解】 瀑布流布局是一种网页布局方式，以多列的形式展示内容，每列中的元素在垂直方向上对齐，就像瀑布一样逐级流下，常用于展示图片丰富的网站，如Pinterest、美丽说和蘑菇街等。这种布局方式...
jQuery网格瀑布流布局插件.rar
10-01
在“jQuery网格瀑布流布局插件.rar”中，jQuery被用来处理页面动态加载和响应式布局，使页面元素能够根据浏览器窗口大小的变化自动调整，实现流畅的滚动效果。CSS特效则负责美化网格布局，如阴影、过渡和动画，让...
jquery 瀑布流实例最流行瀑布流图片展示
09-01
在提供的文件"texiao6562_1560680770"中，可能包含了实现这个jQuery瀑布流实例的代码、样式表和图片资源。解压并查看这些文件，可以帮助我们更深入地理解如何使用jQuery来创建一个流行的瀑布流图片展示。通过学习和...
05创建公务卡扣减明细表_CASH_USE_MINUSAMT_DETAIL_20240708-刘君.sql
最新发布
07-19
05创建公务卡扣减明细表_CASH_USE_MINUSAMT_DETAIL_20240708-刘君.sql
【BP回归预测】龙格库塔算法优化BP神经网络RUN-BP光伏数据预测（多输入单输出）【含Matlab源码 5171期】.zip
07-19
CSDN海神之光上传的全部代码均可运行，亲测可用，直接换数据就行，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法优化BP神经网络分类预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO优化BP 4.4.2 粒子群算法PSO/蛙跳算法SFLA优化BP 4.4.3 灰狼算法GWO/狼群算法WPA优化BP 4.4.4 鲸鱼算法WOA/麻雀算法SSA优化BP 4.4.5 萤火虫算法FA/差分算法DE优化BP 4.4.6 其他优化算法优化BP
在UCA上结合DOA估计算法和自适应波束形成matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【信号分解】基于海鸥优化算法SOA-CEEMDAN实现信号去躁附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
毕业设计javajspKTV包房管理系统(ssh)-qkrp源码含文档
07-19
毕业设计javajspKTV包房管理系统(ssh)-qkrp源码含文档 后台是ssh框架，页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 采用全新的计算机网络和管理系统，将成为提高KTV管理效率，改善服务水准的重要手段之一。所以城市KTV包房信息管理系统是KTV经营不可缺少的现代工具。系统的主要功能包括：会员管理、类别管理、包房管理、预订管理。 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程（在说明文档中）
基于Springboot的图书管理系统论文
07-19
传统信息管理主要依赖管理人员的手工登记与管理。然而，近年来信息技术的快速进步促使许多陈旧的信息管理方式得以更新。特别是图书信息，因其管理内容复杂且数量庞大，手工处理方式已难以满足广大用户的需求，于是图书管理系统应运而生。 本图书管理系统设有管理员和用户两种权限。管理员负责管理用户基本信息、公告信息及图书信息，并能与用户进行交流等。用户则可以查看图书信息、公告以及管理员的回复等。 该系统采用WEB应用程序开发中流行的小程序结构模式，使用空间占用小但功能全面的MySQL数据库进行数据存储，并运用了JSP技术进行开发。该图书管理系统有效解决了传统手工操作中的诸多问题，如数据查询耗时长、管理步骤繁琐等。总体而言，该图书管理系统性能稳定、功能完备，且具有较高的性价比。
自监督学习：YOLO模型性能提升的新前沿
07-19
YOLO（You Only Look Once）是一种流行的实时对象检测系统，最初由 Joseph Redmon 等人在 2015 年提出。它的核心思想是将对象检测任务视为一个回归问题，直接从图像像素到边界框坐标和类别概率的映射。YOLO 以其快速和高效而闻名，特别适合需要实时处理的应用场景。 以下是 YOLO 的一些关键特点： 1. **单次检测**：YOLO 模型在单次前向传播中同时预测多个对象的边界框和类别概率，不需要多次扫描图像。 2. **速度快**：YOLO 非常快速，能够在视频帧率下进行实时检测，适合移动设备和嵌入式系统。 3. **端到端训练**：YOLO 模型可以从原始图像直接训练到最终的检测结果，无需复杂的后处理步骤。 4. **易于集成**：YOLO 模型结构简单，易于与其他视觉任务（如图像分割、关键点检测等）结合使用。 5. **多尺度预测**：YOLO 可以通过多尺度预测来检测不同大小的对象，提高了检测的准确性。 YOLO 已经发展出多个版本，包括 YOLOv1、YOLOv2（也称为 YOLO9000）、YOLOv3、YOLOv4 和 YOLOv5 等。
【信号分解】基于粒子群优化算法PSO-CEEMDAN实现信号去躁附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
读书笔记：LeanCloud 知识库 用户使用常见问题.zip
07-19
读书笔记：LeanCloud 知识库 用户使用常见问题
高分项目-基于SpringBoot框架实现的自习室预订系统（包含全套源码 + 数据库sql + 论文）.zip
07-19
高分项目-基于SpringBoot框架实现的自习室预订系统（包含全套源码 + 数据库sql + 论文）
基于樽海鞘优化算法SSA-VMD实现信号去噪目标函数为包络信息熵 包络熵 排列熵 样本熵最小附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
jquery实现瀑布流效果
05-24
jQuery实现瀑布流效果需要先引入jQuery库，然后通过计算每个元素的位置和高度，来实现元素的动态排列。 以下是一个简单的示例代码： HTML部分： ```html <div class="item">item1 <div class="item">item2 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值