JavaScript实现瀑布流效果

最新推荐文章于 2022-05-26 20:53:57 发布
最新推荐文章于 2022-05-26 20:53:57 发布
阅读量369 收藏
点赞数
分类专栏： 前端相关
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MyLove621/article/details/54893693
版权

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.οnlοad=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.οnscrοll=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;
}


@sherwin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于JavaScript实现瀑布流效果
11-29
本文实例为大家分享了js实现瀑布流效果的具体代码，供大家参考，具体内容如下 前端内容： 使用JavaScript和四个div，将照片放入四个div中 <!DOCTYPE html> <html lang="en"> <head> <meta ...
javascript之瀑布流图片覆盖
line233的博客
11-07 416
 今天在练习javascript实现瀑布流时遇到了一个看上去非常神奇（实际上无脑）的问题，用js加载十张图片之后的页面效果是这样的： 但是想让它们按高低顺序排列即尽量不留下大量空白空间，于是寻找第一行图片高度的最小值，然后将下一行的图片放在高度最小的图片下面，于是写了下面的程序段： var BoxHeightArr = []; for(var j=0;j&lt;ccontent....
JS实现图片瀑布流效果
独学而无友，则孤陋而寡闻
04-23 1025
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实现瀑布流效果
weixin_44849651的博客
01-31 701
今天带来的是js实现瀑布流效果的总结，思路如下 确定每行能存放的图片数量（即列数） ① 获取父级对象； ② 获取包含img的div的父级元素对象数组，即获取类名为 box的对象数组； ③ 获取类名为box的div宽度(通过box[0].offsetWidth获取即可)； ④ 计算一行内能存放多少图片数量（即列数），并给类名为box的div标签的父级元素定宽，即给类名为container的div...
javascript实现瀑布流效果
Daisy花园
01-31 1834
所谓瀑布流效果：随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，数据块就好像瀑布一样永远流不完，所以叫瀑布流。 目前比较出名的用瀑布流布局的就是蘑菇街和堆糖。 http://www.mogujie.com/ http://www.duitang.com/ 大家可以自行去欣赏一下。 index.html<!DOCTYPE html> <html> <head lang="
Js实现瀑布流效果
weixin_55983004的博客
05-26 4699
Js实现瀑布流效果 通过JavaScript实现瀑布流效果，实现不同大小的图片有序展示 效果图： 核心： 1.将图片宽度固定，用浏览器窗口大小除以每个图片的宽度，求出要分成的列数 2.将每个图片定位 3.每次找到最小高度的列，将图片加到该列后 HTML部分以及CSS样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &lt
基于JavaScript实现瀑布流效果(循环渐近)
10-22
本文给大家介绍基于javascript实现循环渐近瀑布流效果，代码简单易懂，非常具有参考价值，需要的朋友参考下吧
JavaScript实现瀑布流以及加载效果
10-20
主要为大家详细介绍了JavaScript实现瀑布流以及加载效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现瀑布流图片效果
10-19
主要为大家详细介绍了JavaScript实现瀑布流图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Elasticsearch初识与简单案例.pdf
04-29
Elasticsearch是一个基于Lucene的分布式全文搜索引擎，提供灵活且高效的搜索和分析功能。通过HTTP请求和客户端库，用户可以索引和搜索文档，执行复杂查询，进行数据分析，并享受高亮显示等特性。其高级功能如复合查询、聚合分析、滚动搜索等，使其适用于各种数据处理和分析场景。Elasticsearch还具有强大的监控和日志功能，确保集群稳定运行。总之，Elasticsearch是企业级搜索和分析的理想选择。
Python基于LSTM模型对全国的空气质量数据进行可视化分析预测源代码
04-29
介绍 对全国2019年1月至2023年12月的空气质量数据进行分析，绘制时间序列图，展示每月/每季度的平均AQI变化趋势。绘制不同省份和城市的平均AQI热力图。分析不同污染物的浓度分布和趋势。绘制空气质量等级分布图。 需求说明 对空气质量数据进行数据分析，并使用LSTM模型进行预测。 安装教程 pip install jupyter pip install numpy pandas matplotlib seaborn 使用说明 在项目路径下打开终端输入jupyter notebook就行
百问网linux桌面GUI，基于LVGL 8.x。.zip
04-29
百问网linux桌面GUI，基于LVGL 8.x。
基于Vue开发的XMall商城前台页面 PC端.zip
04-29
基于Vue开发的XMall商城前台页面 PC端.zip
2019年中国民航大学电子设计竞赛E题-自动导航运输车
04-29
2019年中国民航大学电子设计竞赛E题-自动导航运输车 全国大学生电子设计竞赛（National Undergraduate Electronics Design Contest），试题，解决方案及源码。计划或参加电赛的同学可以用来学习提升和参考
精灵宝可梦go游戏UI界面设计PSD源文件.zip
04-29
游戏开发资源，游戏UI，游戏GUI，游戏图标，PSD格式，XD格式，PNG下载，源文件，可编辑下载，游戏购物充值界面，宝石，图标，PS格式，AI格式等，游戏APP
线索二叉树的实现.doc
04-29
(1)逻辑设计：写出抽象数据类型的定义，各个主要模块的算法，并画出模块之间的调用关系图； (2)详细设计：定义相应的存储结构并写出各函数的伪码算法。 (3)程序编码：把详细设计的结果进二步求精为程序设计语言程序。 (4)程序调试与测试：采用自底向上，分模块进行，即先调试低层函数。 (5)结果分析：程序运行结果包括正确的输入及其输出结果和含有错误的输入及其输出结果。算法的时间、空间复杂性分析； 效果表现为用户输入一串字符表示的先序序列，程序能够根据这个序列正确地建立二叉树，并通过中序线索化非递归遍历结果。这有助于验证二叉树结构和遍历算法的正确性，同时对于理解和操作二叉树数据结构非常有帮助。 程序的输出结果证明了其对二叉树操作的正确性和有效性。
资源【STM32+HAL】SDIO模式读写SD卡
04-29
​ 一、准备工作 有关CUBEMX的初始化配置，参见我的另一篇blog：【STM32+HAL】CUBEMX初始化配置 二、所用工具 1、芯片： STM32F407VET6 2、IDE： MDK-Keil软件 3、库文件：STM32F4xxHAL库 三、实现功能 实现用DMA读写SD卡内容 ​
node-v10.4.0-win-x86.zip
最新发布
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
HTML5小游戏源码下载网页版游戏JS小游戏-圈泡泡游戏源码.zip
04-29
HTML5小游戏源码下载，JS小游戏源码下载，坦克大战，驴子跳，连连看，俄罗斯方块，圈泡泡，塔防，太空战舰，愤怒的小鸟，植物大战僵尸，水果忍者，扫雷，超级玛丽，打地鼠，坦克大战，麻将等JS小游戏源码下载，游戏开发教程，网页游戏，本地直接打开就可以玩。
jquery实现瀑布流效果
05-24
jQuery实现瀑布流效果需要先引入jQuery库，然后通过计算每个元素的位置和高度，来实现元素的动态排列。 以下是一个简单的示例代码： HTML部分： ```html <div class="item">item1 <div class="item">item2 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值