JavaScript实现瀑布流效果

最新推荐文章于 2023-07-11 20:01:53 发布
原创 最新推荐文章于 2023-07-11 20:01:53 发布 · 464 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一个使用JavaScript实现的瀑布流布局方案。通过监听滚动条位置动态加载图片，并采用绝对定位来实现不同高度的图片自动对齐的效果。文章还提供了完整的HTML、CSS及JavaScript代码。

1、HTML文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js瀑布流</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<script src="myjs.js"></script>
</head>
<body>
	<div id="container">
		<div class="box">
			<div class="box_img">
				<img src="image/a (10).jpg">
			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (11).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (12).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (13).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (14).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (15).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (16).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (17).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (18).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (16).jpg">

			</div>
		</div>
		<div class="box">
			<div class="box_img">
				<img src="image/a (17).jpg">

			</div>
		</div>
        <div class="box">
        			<div class="box_img">
        				<img src="image/a (16).jpg">

        			</div>
        		</div>
        		<div class="box">
        			<div class="box_img">
        				<img src="image/a (17).jpg">

        			</div>
        		</div>
        <div class="box">
        			<div class="box_img">
        				<img src="image/a (16).jpg">

        			</div>
        		</div>
        		<div class="box">
        			<div class="box_img">
        				<img src="image/a (17).jpg">

        			</div>
        		</div>
        <div class="box">
        			<div class="box_img">
        				<img src="image/a (16).jpg">

        			</div>
        		</div>
        		<div class="box">
        			<div class="box_img">
        				<img src="image/a (17).jpg">

        			</div>
        		</div>
        <div class="box">
        			<div class="box_img">
        				<img src="image/a (16).jpg">

        			</div>
        		</div>

        <div class="box">
       			<div class="box_img">
       				<img src="image/a (16).jpg">

       			</div>
       		</div>
       		<div class="box">
      	<img src="image/a (17).jpg">
                    <div class="box_img">

       			</div>
       		</div>
	</div>
</body>
</html>

2、js文件 

window.onload=function(){
imglocation("container","box");
    var imgData={"data":[{"src":"a (10).jpg"},{"src":"a (11).jpg"},{"src":"a (12).jpg"},{"src":"a (13).jpg"},{"src":"a (4).jpg"},{"src":"a (15).jpg"},{"src":"a (6).jpg"}]}

    window.onscroll=function(){
                   if( checkFlag()){
                          var cparent=document.getElementById("container");
                       for(var i=0;i<imgData.length;i++){
                           var ccontent=document.createElement("div");
                           ccontent.className="box";
                           cparent.appendChild(ccontent);
                           var boximg=document.createElement("div");
                           boximg.className="box_img";
                           ccontent.appendChild(boximg);
                           var img=document.createElement("img");
                           img.src="image/"+imgData.data[i].src;
                           boximg.appendChild(img);
                       }
                       imglocation("container","box");
                   }
    }
}
function checkFlag(){
    var cparent=document.getElementById("container");
    var ccontent=getChildelement(cparent,"box");
    var lastcontntheight=ccontent[ccontent.length-1].offsetTop;
   var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
    var pageheight=document.documentElement.clientHeight||document.body.clientHeight;
    if(lastcontntheight<scrolltop+pageheight){
        return true;

    }
}

function imglocation(parent,content){
//
	var cparent=document.getElementById(parent);
	var ccontent=getChildElement(cparent,content);
	var imgWidth=ccontent[0].offsetWidth;
	var num=Math.floor(document.documentElement.clientWidth/imgWidth);
	cparent.style.cssText="width:"+imgWidth*num+"px;margin 0 auto";
    var BoxHeighrArr=[];
    for(var i=0;i<ccontent.length;i++){
        if(i<num){
            BoxHeighrArr[i]=ccontent[i].offsetHeight;
        }else{
            var minheight=Math.min.apply(null,BoxHeighrArr);
          var minIndex=getminheightLocation(BoxHeighrArr,minheight);
            ccontent[i].style.position="absolute";
            ccontent[i].style.top=minheight="px";
            ccontent[i].style.left=ccontent[minIndex].offsetLeft+"px";
            BoxHeighrArr[minIndex]=BoxHeighrArr[minIndex]+ccontent[i].offsetHeight;
        }


    }

}
function getminheightLocation(BoxHeightArr,minHeight){
    for(var i in BoxHeightArr){
        if(BoxHeightArr[i]==minHeight){
            return i;

        }

    }



}
function getChildelement(parent,content){
var contentarr=[];
var allcontent=parent.getElementsByTagName("*");
for(var i=0;i<allcontent.length;i++){
    if(allcontent[i].className==content){
        contentarr.push(allcontent[i]);

    }
}
return contentarr;
}

3、css文件 

*{
	margion:0px;
	padding:0px;
}
#container{
	position:relative;
}
.box{
	padding:5px;
	float:left;
}
.box_img{
	padding:5px;
	border:1px solid #cccccc;
	box-shadow: 0 0 5px #cccccc;
	border-radius: 5px;
}
.box_img img{
	width:100px;
	height:auto;
}


JS实现图片瀑布流效果
独学而无友，则孤陋而寡闻
04-23 1182
1.HTML文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js瀑布流</title> <link rel="stylesheet" type="text/css" href="css/style.c...
javascript之瀑布流图片覆盖
line233的博客
11-07 541
 今天在练习javascript实现瀑布流时遇到了一个看上去非常神奇（实际上无脑）的问题，用js加载十张图片之后的页面效果是这样的： 但是想让它们按高低顺序排列即尽量不留下大量空白空间，于是寻找第一行图片高度的最小值，然后将下一行的图片放在高度最小的图片下面，于是写了下面的程序段： var BoxHeightArr = []; for(var j=0;j&lt;ccontent....
JavaScript实现图片的瀑布流效果
mikkfe的博客
03-07 455
在一些网站中会用到图片的瀑布流效果，图片的宽度固定而高度不固定，对这样的图片进行排列，具体实现如下： .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 4px;} .imgbox{border: solid 1px #000;padding: 4px;border-radius: 4px;} .imgbox im...
JS—实现瀑布流效果
xiaobai_qxjn的博客
07-11 462
JS 实现响应式瀑布流效果
js实现简单瀑布流效果
call_m_py的博客
05-30 344
js实现简单瀑布流效果 1.瀑布流，虽然是一种经典的前端效果，但经常不用都忘了它的写法。前些天需要时，一直忙着找插件，但插件并不是很友好，免费的达不到效果，花金币又感觉很不值。有时间还不如自己来，又是自己就随意写了一个，还好能勉强过关。 var left_top=$(".left_div>div:last-child").offset().top var right_top=$(".ri...
java瀑布流_原生JS实现瀑布流效果
weixin_42356829的博客
02-25 116
【前言】近期开始讲到高阶JS，为了提高学习兴趣，再讲点特效。本次简单总结下JS实现瀑布流特效样式特点：(1)呈现出等宽不等高，参差不齐排列(2)拖动滚动条时会不断加载新数据，甚至可以无限往下拖动，一直拖一直加载新数据实现方案：①原生JS；②jQuery库；③CSS3的多栏布局【主体】直接上代码，具体意思里面有注释，注意文件位置JS/*代码初始化*/*{margin: 0;padding: 0;}/...
分别使用JS和JQuery实现瀑布流以及追加效果
leeeeeena's blog
12-07 375
分别使用JS和JQuery实现瀑布流以及追加效果效果图htmlcss/style.cssjs实现瀑布流jquery实现瀑布流js和jquery对比代码jquery实现瀑布追加的效果 效果图 html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>瀑布流</title> <link rel
【创新未发表】绿电直连型电氢氨园区优化运行研究（Matlab代码、Python、数据、word论文）
06-20
内容概要：本研究聚焦于绿电直连型电氢氨园区的优化运行，提出一种集成绿色电力直接供给、电解水制氢及氢气合成氨工艺的综合能源系统架构。通过建立包含风光发电、电解槽、氨合成反应器、储氢罐、电网交互及多类型负荷在内的系统模型，综合考虑绿电直供优先、能量梯级利用与多能互补原则，构建以系统综合运行成本最小化为目标的优化调度模型。研究采用Matlab与Python工具进行算法求解和仿真分析，利用实际气象与负荷数据完成案例验证，评估了不同运行策略下系统的经济性、可再生能源消纳能力与碳减排效益，为新型电氢氨一体化园区的规划与运行提供了理论依据和技术支撑。; 适合人群：具备一定电力系统、新能源或化工背景的研究生、科研人员及从事综合能源系统规划与优化工作的工程技术人员。; 使用场景及目标：①用于科研学习，理解电-氢-氨多能转换系统的建模与优化方法；②为工业园区的低碳化、智能化改造提供技术参考与决策支持；③作为开发类似综合能源管理系统的理论基础。; 阅读建议：此资源包含完整的模型代码、数据与论文，使用者应结合代码仔细研读论文中的模型构建部分，重点关注目标函数与约束条件的设计逻辑，并尝试修改参数进行仿真，以深入掌握优化算法在实际系统中的应用。
微型打印机控制电路的设计资料.rar
06-20
微型打印机控制电路的设计资料.rar
HZJZC.rar
06-20
当 CAD 缺失对应字体时，图纸文字会显示异常，出现乱码、问号。将下载好的字体文件复制到 AutoCAD 的 Fonts 文件夹中，即可恢复正常显示。
芯片测试基于RS485与Modbus RTU的自动化测试通信系统设计：工业级抗干扰控制与实时数据采集架构
最新发布
06-20
内容概要：本文深入探讨了RS485通信协议在芯片行业自动化测试系统中的实际开发与应用，涵盖其关键概念、电气特性、通信机制及与Modbus RTU协议的结合使用。文章重点介绍了差分信号完整性设计、主从时序控制、CRC校验与重传机制等核心技术要点，并通过一个基于Python的完整代码实例，展示了如何实现RS485主站对探针台、自动分选机等芯片测试设备的控制与数据采集。此外，还分析了RS485在晶圆探针台、ATE设备集群和环境监控等典型场景的应用，并展望了其与工业以太网融合、智能化诊断、高速化及AI集成的发展趋势。; 适合人群：具备一定嵌入式系统或工业通信基础，从事芯片测试、自动化设备开发及相关领域的研发人员，尤其是工作1-3年希望提升现场总线应用能力的工程师。; 使用场景及目标：①理解RS485在高干扰芯片测试环境中稳定通信的设计原理；②掌握Modbus RTU协议在Python下的实现方法，用于实际控制探针台、Handler等设备；③构建可靠的数据采集与设备控制系统，支持CRC校验、异常处理和日志追踪；④为后续向高速通信和智能诊断系统升级提供技术储备。; 阅读建议：此资源强调实战开发，建议结合硬件环境动手调试代码，重点关注线程锁、CRC计算、帧解析和超时控制等关键环节，在真实产线中验证通信稳定性，并利用日志系统进行故障分析与优化。
汽化过程流程图.rar
06-20
汽化过程流程图.rar
【2026.6.19】端午节版 - 定时执行专家 V8.2 发布 - 重大更新：自动隐身截屏空闲暂停功能
06-20
▌定时执行专家介绍 一款制作精良、功能强大、毫秒精度、专业级的定时任务执行软件。 软件具有 135 种【任务类型】（26个自带任务类型 + 109个Nircmd命令类型）、12 种【触发器】触发方式，并且全面支持界面化【Cron表达式】设置。软件采用多线程并发方式检测任务触发和任务执行，能够达到毫秒级的执行精度，可以同时支持200个以上任务的毫秒级触发。 ▌更新日志 ▼ 2026-06-14 V8.2 - 增加 空闲一定时长暂停自动截屏功能（可大幅减少重复截屏） - 优化 界面显示（字体调整、DPI自动感应适配）
HZL3.rar
06-20
当 CAD 缺失对应字体时，图纸文字会显示异常，出现乱码、问号。将下载好的字体文件复制到 AutoCAD 的 Fonts 文件夹中，即可恢复正常显示。
HZKT64F.rar
06-20
当 CAD 缺失对应字体时，图纸文字会显示异常，出现乱码、问号。将下载好的字体文件复制到 AutoCAD 的 Fonts 文件夹中，即可恢复正常显示。
水产用冻块破碎投饲机 SolidWorks三维.rar
06-20
水产用冻块破碎投饲机 SolidWorks三维.rar
【创新未发表】离网运行、储能配置与并网经济性比较研究（Matlab代码、Python、数据、word论文）
06-20
【创新未发表】离网运行、储能配置与并网经济性比较研究（Matlab代码、Python、数据、word论文）
1Obit Unlocker v1.3.0.12 单文件版
06-20
1Obit Unlocker v1.3.0.12 单文件版
HZDXFS.rar
06-20
当 CAD 缺失对应字体时，图纸文字会显示异常，出现乱码、问号。将下载好的字体文件复制到 AutoCAD 的 Fonts 文件夹中，即可恢复正常显示。
双螺杆挤出机用减速机分配箱装配图ks36.rar
06-20
双螺杆挤出机用减速机分配箱装配图ks36.rar
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值