html实现各种瀑布流(附源码)

文章目录

  • 1.设计来源
    • 1.1 动态响应瀑布流
    • 1.2 分页瀑布流
    • 1.3 响应瀑布流
  • 2.效果和源码
    • 2.1 动态效果
    • 2.2 源代码
  • 源码下载

作者:xcLeigh
文章地址:https://blog.csdn.net/weixin_43151418/article/details/134613121


html实现各种瀑布流(附源码),好看的瀑布流,瀑布流源码,源码下载,带分页的瀑布流,无限加载瀑布流,简易的瀑布流等,各种风格都有,代码上手简单,代码独立,可以直接使用。也可直接预览效果。

1.设计来源

1.1 动态响应瀑布流

    动态响应瀑布流,渐渐显示的动态加载数据效果,随意飘动,自动补缺,无限循环,高亮,酷炫。具体动态效果见下面视频。

请添加图片描述

1.2 分页瀑布流

    分页瀑布流,自适应布局内容,分页无限循环,高亮,酷炫。具体动态效果见下面视频。

请添加图片描述

  • 瀑布流

请添加图片描述

  • 底部页码效果

1.3 响应瀑布流

    响应瀑布流,渐渐显示的动态加载数据效果,无限循环,高亮,酷炫。具体动态效果见下面视频。

请添加图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示,可在此代码基础上更加完善功能,支持扩展自己的风格,可以删减内容,打造属于自己的瀑布流。

html实现各种瀑布流(附源码)

2.2 源代码

    这里是主界面的代码,其他图片、js、css等代码,见下面的 源码下载 ,里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>好看的瀑布流 - xcLeigh</title><link href="images/favicon.png" rel="icon"><style type="text/css">.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #ff8500;background-color: #fff;line-height: 41px;}.link {/*   此时的a为行内元素 修改高无效 需要将a转换为行内块元素 它既可以有宽度 又可以有高度*/display: inline-block;height: 41px;padding: 0 10px;/* 上下为0  左右为20px */font-size: 12px;color: orange;text-decoration: none;float:right;}.link:hover {background-color: #eee;color: #E70722;}.active{background-color: #eee;color: #E70722;}.nav span {/*   此时的a为行内元素 修改高无效 需要将a转换为行内块元素 它既可以有宽度 又可以有高度*/display: inline-block;line-height: 30px;padding: 0 20px;/* 上下为0  左右为20px */font-size: 12px;color: #4c4ac4;text-decoration: none;cursor:pointer;}.nav span:hover {background-color: #eee;color: #ff8500;}</style></head><body style="margin:auto;padding:auto; background-color:rgba(255,133,0,0.03);"><div class="dicContent" style="width:100%; height:calc(100% - 46px); z-index:111; position:absolute; margin:0px;padding:0px; margin-top:46px;"><iframe  class="dicContent" id="iframeContent" src="瀑布流/分页瀑布流/index.html" border="0" style="border:0px;width:100%;height:calc(100%); position: absolute; margin:0px;padding:0px;background-color: transparent !important;"></iframe></div><div class="nav"><span onclick="showUrl('https://blog.csdn.net/weixin_43151418/')"><img src="images/favicon.png" style="width: 12px; height: 12px; padding-top: 12px;">xcLeigh源码</span><a href="javascript:void(0);" class="link active" onclick="showContent('瀑布流/分页瀑布流/index.html',this)">分页瀑布流</a><a href="javascript:void(0);" class="link" onclick="showContent('瀑布流/响应瀑布流/index.html',this)">响应瀑布流</a><a href="javascript:void(0);" class="link" onclick="showContent('瀑布流/动态响应瀑布流/index.html',this)">动态响应瀑布流</a></div>
</body>
<script type="text/javascript">function showUrl(url){window.open(url,"_blank");}function showContent(url,obj){var arr=document.getElementsByClassName("link");for(var i=0;i<arr.length;i++){arr[i].classList.remove("active");}obj.setAttribute("class","link active");document.getElementById("iframeContent").src=url;}
</script>
</html>

源码下载

html实现各种瀑布流(源码) 点击下载
在这里插入图片描述


     💢 关注博主 带你实现畅游前后端

     🏰 加入社区 带你体验马航不孤单

     💯 神秘个人简介 带你体验不一样得介绍

     💘 为爱表白 为你那个TA,体验别致的浪漫惊喜

     🎀 酷炫邀请函 带你体验高大上得邀请


     ① 🉑提供云服务部署(有自己的阿里云);
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号等相关业务;
     如🈶合作请联系我,期待您的联系。
    :本文撰写于CSDN平台,作者:xcLeigh(所有权归作者所有),https://blog.csdn.net/weixin_43151418,如果相关下载没有跳转,请查看这个地址,相关链接没有跳转,皆是抄袭本文,转载请备注本文原地址。


     亲,码字不易,动动小手,欢迎 点赞 ➕ 收藏,如 🈶 问题请留言(评论),博主看见后一定及时给您答复,💌💌💌


原文地址:https://blog.csdn.net/weixin_43151418/article/details/134613121(防止抄袭,原文地址不可删除)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/171130.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

100元预算,轻松涨粉1000!腾讯运营面试秘籍大揭秘!

大家好啊&#xff01;小米在这里&#xff5e; 很高兴又有机会和大家见面啦&#xff01;最近小米参加了一场腾讯的运营面试&#xff0c;遇到了一个超有趣的问题&#xff1a;如果让你运营一个公众号&#xff0c;近期需要增加1000个关注&#xff0c;预算100元&#xff0c;怎么完成…

CMake中的变量: 描述系统信息的变量

文章目录 变量名称描述ANDROID当目标系统&#xff08;CMAKE_SYSTEM_NAME&#xff09;为Android时&#xff0c;设置为1。APPLE当目标系统是苹果平台&#xff08;macOS、iOS、tvOS、visionOS或watchOS&#xff09;时&#xff0c;设置为True。BORLAND如果正在使用Borland编译器&am…

【阿里云】图像识别 智能分类识别 项目开发(一)

语音模块和阿里云图像识别结合 环境准备 代码实现 编译运行 写个shell脚本用于杀死运行的进程 语音模块和阿里云图像识别结合 使用语音模块和摄像头在香橙派上做垃圾智能分类识别 语音控制摄像下载上传阿里云解析功能点实现 环境准备 将语音模块接在UART5的位置 在orange…

数据结构总复习

文章目录 线性表动态分配的顺序存储结构链式存储 线性表 动态分配的顺序存储结构 通过分析代码&#xff0c;我们发现&#xff0c;要注意什么&#xff1a; 要分清你的下标Insert 函数是可以用来没有元素的时候&#xff0c;增加元素的Init(或者Create )函数一般只用来分配空间…

qt 简单了解QHBoxLayout QVBoxLayout QFormLayout水平,垂直,表单布局管理器.

QHBoxLayout水平布局,QVBoxLayout垂直布局,QFormLayout表单布局管理器,是常用的布局管理器,是用代码编写应用界面必不可少的功能类. 1.tips 这里值得注意的是,2个单选按钮(QRadioButton)同时放进一个水平布局管理器(QHBoxLayout)中,相当于放进了一个分组器中,此时,2个单选按钮…

C++判断一个整数是否为回文数

可以将整数转换为字符串&#xff0c;然后再判断该字符串是否为回文串。 将整数转化为字符串&#xff0c;可以使用 to_string() 方法&#xff1b; 使用双指针法判断字符串是否为回文串。 #include <iostream> #include <string>using namespace std;bool isPalin…

Qt QString与QChar总结

(一) QString 1 QString的简介 QString 是Qt 中的一个类&#xff0c;用于存储字符串&#xff0c;QString 没有父类。QString 存储的是一串字符&#xff0c;每个字符是一个 QChar 类型的数据。QChar 使用的是 UTF-16 编码&#xff0c;一个字符包含 2字节数据。 对于超过 6553…

5 个 Python 异常值检测算法实战案例

异常值检测(outlier)是一种数据挖掘过程,用于确定数据集中发现的异常值并确定其出现的详细信息。当前自动异常检测至关重要,因为大量数据无法手动标记异常值。自动异常检测具有广泛的应用,例如信用卡欺诈检测,系统健康监测,故障检测以及传感器网络中的事件检测系统等。 …

go atexit源码分析

文章目录 atexit源码解析UML类图样例一: 程序退出之前执行注册函数1.1 流程图1.2 代码分析 样例二&#xff1a;使用cancel取消注册函数2.1 cancel流程图2.2 代码分析 样例三&#xff1a;使用Fatal/Fatalln/Fatal执行注册函数3.1 Fatal/Fatalln/Fatal流程图3.2 代码分析 atexit源…

Android平台GB28181设备接入模块开发填坑指南

技术背景 为什么要开发Android平台GB28181设备接入模块&#xff1f;这个问题不再赘述&#xff0c;在做Android平台GB28181客户端的时候&#xff0c;媒体数据这块&#xff0c;我们已经有了很好的积累&#xff0c;因为在此之前&#xff0c;我们就开发了非常成熟的RTMP推送、轻量…

Scannet v2 数据集介绍以及子集下载展示

Scannet v2 数据集介绍以及子集下载展示 文章目录 Scannet v2 数据集介绍以及子集下载展示参考数据集简介子集scannet_frames_25kscannet_frames_test 下载脚本 download_scannetv2.py 参考 scannet数据集简介和下载-CSDN博客 scannet v2 数据集下载_scannetv2数据集_蓝羽飞鸟的…

kafka学习笔记(一)--脑裂

我知道你想裂&#xff0c;但你先别裂 脑裂 用集群部署的大多数的分布式系统无可避免会面临脑裂问题。简单来说&#xff0c;脑裂就是在同一时刻出现了两个“Leader&#xff08;或叫Master&#xff09;”。设想这样一个场景&#xff1a;某分布式系统的分别部署在A&#xff0c;B…

BeanUtil的正确使用方式

shigen日更文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 在实际的开发中&#xff0c;我们常常会用到工具类去拷贝对象的属性&#xff0c;将一个对象的属性转换成另外一个…

球面的表面积

此推导需要用到重积分的知识&#xff0c;另外关于曲面的面积公式可以看我之前的博客

百度AI布局:从财报看百度的核心竞争力和未来发展方向

百度是中国最大的搜索引擎&#xff0c;也是全球领先的人工智能&#xff08;AI&#xff09;公司。百度在2023年第三季度业绩中&#xff0c;展示了其在AI领域的强劲表现和广阔前景。 百度财报透露了关于AI业务的哪些重要信息&#xff1f; 百度在2023年第三季度的财报中&#xf…

机器学习:攻击方法FGSM系列

任务 FGSM I-FGSM MI-FGSM Ensemble Attack 攻击评价指标 准确率越低表明攻击越好 数据 预训练模型 BaseLine 实践

***Linux常用命令及解释

1、查看Linux的版本信息 1.1、uname -a 1.2、cat /etc/issue 1.3、cat /proc/version 1.4、hostnamectl 通过使用hostnamectl命令&#xff0c;可以查询和更改系统主机名&#xff0c;并且还可以查看Linux的发行版和内核版本。 2、删除文件 3、修改目录权限 4、解压文件 5、…

探索 Linux vim/vi 编辑器:介绍、模式以及基本操作演示

&#x1f490;作者&#xff1a;insist-- &#x1f490;个人主页&#xff1a;insist-- 的个人主页 理想主义的花&#xff0c;最终会盛开在浪漫主义的土壤里&#xff0c;我们的热情永远不会熄灭&#xff0c;在现实平凡中&#xff0c;我们终将上岸&#xff0c;阳光万里 ❤️欢迎点…

目标检测YOLO实战应用案例100讲-基于多光谱图像融合的光伏组件故障 检测(续)

目录 3.4 基于改进RIFT的光伏多光谱图像配准 3.4.1 Harris角特征点检测算法

Spring的依赖注入,依赖注入的基本原则,依赖注入的优势

文章目录 Spring的依赖注入依赖注入的基本原则依赖注入有什么优势查找定位操作与应用代码完全无关。有哪些不同类型的依赖注入实现方式&#xff1f;构造器依赖注入和 Setter方法注入的区别 Spring的依赖注入 控制反转IoC是一个很大的概念&#xff0c;可以用不同的方式来实现。…