JS实现瀑布流布局

瀑布流布局是一种常见的网页布局方式,可以实现页面内容的动态排列,使页面看起来更加美观。下面是一个简单的JS实现瀑布流布局的示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<style>.waterfall {column-count: 4;column-gap: 10px;}.item {margin-bottom: 10px;}
</style>
</head>
<body>
<div class="waterfall" id="waterfall">
</div><script>const waterfall = document.getElementById('waterfall');const data = ['https://via.placeholder.com/150','https://via.placeholder.com/200','https://via.placeholder.com/250','https://via.placeholder.com/300','https://via.placeholder.com/350','https://via.placeholder.com/400','https://via.placeholder.com/450','https://via.placeholder.com/500',];data.forEach((url) => {const item = document.createElement('div');item.className = 'item';const img = document.createElement('img');img.src = url;item.appendChild(img);waterfall.appendChild(item);});
</script>
</body>
</html>

 

在这个示例中,我们首先定义了一个包含图片链接的数组data,然后使用forEach方法遍历数组,创建div元素作为每个图片的容器,并设置其样式为item。然后创建img元素,设置其src属性为对应的图片链接,最后将img元素添加到div容器中,并将整个div容器添加到waterfall容器中。

通过这种方式,我们可以实现一个简单的瀑布流布局,使页面内容以多列的方式动态排列。你可以根据实际需求调整列数和间距等样式来实现不同的效果。

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

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

相关文章

抖音直播植物大战僵尸杂交版v1.2安装包—可用于抖音直播

植物大战僵尸杂交版是由玩家自制的一款改版游戏。在这个版本中&#xff0c;各种类型的植物都被融合成了全新的形态。比如&#xff0c;向日葵和阳光菇可以产出更多的阳光&#xff0c;坚果墙和火炬树桩合体成为能抗能辅的超级植物等等。这些融合植物种类繁多&#xff0c;各具特色…

从不平凡Image文件夹,自定义读取img和label,构造dataset

问题描述 torchvision.datasets.ImageFolder 假定&#xff1a;子文件名子文件夹的图像的标签 但在KDEF文件夹中&#xff0c;子文件夹下有所有的类&#xff0c;不宜用ImageFolder读取path来得到dataset My 实现&#xff1a; # how to build dataset? from torch.utils import …

AI-数学-高中-47导数与几何意义

原作者视频&#xff1a;【导数】【考点精华】7导数与几何意义考点解析&#xff08;基础&#xff09;_哔哩哔哩_bilibili 该点处切点的斜率 该点处导函数的值 示例1&#xff1a; 导数问题解决最常用方法&#xff1a;参数分离&#xff0c;在左边函数有解的值域范围内。 示例2&…

Netty 网络编程深入学习【一】:ByteBuffer 源码解析

ByteBuffer源码阅读 ByteBuffer是一个用于处理字节数据的缓冲区类。它是Java NIO 包的一部分&#xff0c;提供了一种高效的方式来处理原始字节数据。 ByteBuffer 可以用来读取、写入、修改和操作字节数据&#xff0c;它是一种直接操作字节的方式&#xff0c;比起传统的 InputSt…

Channel Session架构简介

"Channel Session架构" 是指在分布式系统、即时通讯、网络编程等领域中&#xff0c;结合了"Channel"&#xff08;通道&#xff09;和"Session"概念的一种设计模式。这种架构强调的是高效、安全地管理客户端与服务器之间的通信会话&#xff0c;尤…

基于Spring Boot的在线BLOG网设计与实现

基于Spring Boot的在线BLOG网设计与实现 开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/idea 系统部分展示 前台首页管理界面&#xff0c;用户经过登录前台首页查看通…

【UnityRPG游戏制作】Unity_RPG项目_玩家逻辑相关

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;就业…

HSDB使用教程

HSDB&#xff1a;Hostspot Debugger&#xff0c;JVM内置的工具&#xff0c;用于深入分析JVM运行时的内部状态 启动HSDB java -cp D:/tools/jdk-1.8/lib/sa-jdi.jar sun.jvm.hotspot.HSDB 获取进程id jps 连接到指定进程 查找类 通过查询查找对象 输入查询语句 select d from …

100/篇论文修改?提高营收从拒绝客户开始

进入4月份以来新进询盘客户可谓惨淡&#xff0c;为了完成业绩突破我接了一个并不擅长的订单&#xff0c;最终失败赔钱收场&#xff0c;痛定思痛我决定拒掉不可靠的项目&#xff1a; 不熟悉的领域 超出团队承载范围的 低价绝对低价的项目 今天收到客户询盘我非常的开心&#…

【Java EE】多线程(二)Thread 类与常用方法

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 |《Web世界探险家》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更…

Linux上OcenBase单机版部署及基本信息查询

OceanBase单机版部署可以通过在线和离线两种方式部署。在线部署可以通过yum源或者apt源部署&#xff0c;直接拉取官方源码即可。实际使用中&#xff0c;大部分环境连不了外网&#xff0c;本文介绍离线方式安装。 下载“OceanBase All in One”离线安装包下载官方地址&#xff1…

深入理解Linux 内核 内存管理(上)

目录 页框管理 页描述符 UMA和NUMA 内存管理区 保留的页框池 分区页框分配器 请求和释放页框 释放页框 高端内存页框的内核映射 伙伴系统算法 连续页框块释放&#xff1a; 1.数据结构 2.分配块 3.释放块 RAM中&#xff0c;剩下的自由部分被称为动态内存&#xff0…

在 Python 异步协程中使用同步队列

在 Python 异步协程中使用同步队列 使用 Python asyncio 进行异步编程时&#xff0c;如果需要在协程间交互数据可以使用异步队列 asyncio.Queue。但 asyncio.Queue 不是线程安全的&#xff0c;如果需要在不同线程间的异步程序之间或者不同线程的异步程序和同步程序间交换数据&a…

c++实战篇(三) ——对socket通讯服务端与客户端的封装

前言 在前面几篇文章中我们介绍过一些有关于网络编程的相关知识,我们介绍了在tcp传输数据的时候发送缓冲区与接收缓冲区&#xff0c;我们介绍了在tcp发送与接收的过程中可能出现的分包与粘包的问题&#xff1a; c理论篇(一) ——浅谈tcp缓存与tcp的分包与粘包 我们介绍了在网络…

MongoDB与Elasticsearch特性及知识点对比

仅作为技术选型和面试参考。对比记忆更佳。 目录 1.数据模型 2.索引机制 3. 查询性能 4.分布式架构 5.数据一致性 6.文档大小限制 7.存储引擎 8.数据压缩 10.实时搜索 11.安全性 12.版本控制 13 事务支持 14.地理空间搜索 15.多租户支持 16 运维复杂度 17,监…

直播素材安卓情侣飞行棋v2.22 仿dofm 支持自定义模式—可用直播素材

一个情侣间增进友谊的小游戏非常好玩&#xff0c;适合男孩女孩之间增进感情&#xff01;快和你暗恋的女孩一块玩吧&#xff0c;极速升温 永久免费&#xff01;解锁激活码内容全部畅玩&#xff01;全网最强超级给力&#xff01;真人说书音频 网盘自动获取 链接&#xff1a;http…

重要综述!全文翻译!宫鹏教授、陈镜明教授、梁顺林教授等《Nature Climate Change》!

2013年&#xff0c;由宫鹏教授、陈镜明教授和梁顺林教授等联合发表了一篇《Nature Climate Change》综述文章&#xff0c;其主题是卫星遥感在全球变化中的作用研究。&#xff08;已被引510次&#xff0c;来源谷歌学术&#xff09;。 卫星遥感方式对于气象问题、大气、陆地和海洋…

【机器学习】集成方法---Boosting之AdaBoost

一、Boosting的介绍 1.1 集成学习的概念 1.1.1集成学习的定义 集成学习是一种通过组合多个学习器来完成学习任务的机器学习方法。它通过将多个单一模型&#xff08;也称为“基学习器”或“弱学习器”&#xff09;的输出结果进行集成&#xff0c;以获得比单一模型更好的泛化性…

【中断】【ARM64】学习总结

optee中的异常向量表解读–中断处理解读 https://mp.weixin.qq.com/s/gBsy4YDYTHGRsy2zcVr6Vg