原生JS实现瀑布流效果

最新推荐文章于 2022-09-27 14:40:02 发布
最新推荐文章于 2022-09-27 14:40:02 发布
阅读量178 收藏 2
点赞数 2
分类专栏： JS 笔记随笔 前端积累 教学笔录 常见特效 文章标签： JS 笔记随笔 前端积累 教学笔录 常见特效 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42445490/article/details/88819072
版权

【前言】

   近期开始讲到高阶JS，为了提高学习兴趣，再讲点特效。本次简单总结下JS实现瀑布流特效

   样式特点：

     （1）呈现出等宽不等高，参差不齐排列

     （2）拖动滚动条时会不断加载新数据，甚至可以无限往下拖动，一直拖一直加载新数据

   实现方案：

      ①原生JS；②jQuery库；③CSS3的多栏布局

 

【主体】

   直接上代码，具体意思里面有注释，注意文件位置

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JS</title>
	<style type="text/css">
		/*代码初始化*/
		*{
			margin: 0;
			padding: 0;
		} 
		/*代码主体*/
		#main{
			position: relative;
			margin: 0 auto;
		}
		/*砖头缝隙*/
		.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;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="img/animate.css">
</head>
<body>

	<div id="main">
		<div class="box">
			<div class="pic">
				<img src="img/01.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/02.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/03.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/04.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/05.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/06.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/07.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/08.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/09.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/01.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/02.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/03.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/04.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/05.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/06.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/07.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/08.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/09.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/01.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/02.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/03.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/04.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/05.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/06.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/07.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/08.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/09.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/01.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/02.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/03.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/04.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/05.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/06.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/07.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/08.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/09.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/01.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/02.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/03.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/04.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/05.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/06.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/07.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/08.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/09.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/10.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/01.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/02.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/03.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/04.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/05.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/06.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/07.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/08.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/09.jpg">
			</div>
		</div>
		<div class="box">
			<div class="pic">
				<img src="img/10.jpg">
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var dataList = {
				"data":[
					{"src":"01.jpg"},
					{"src":"02.jpg"},
					{"src":"03.jpg"},
					{"src":"04.jpg"},
					{"src":"05.jpg"},
					{"src":"06.jpg"},
					{"src":"07.jpg"},
					{"src":"08.jpg"}
				]
			}
		window.onload = function(){
			waterFall();
			window.onscroll = function(){
				change();
			} 
		}
		function waterFall(){
			//1、获取box盒子
			var main = document.getElementById("main");
			var box = main.getElementsByClassName("box");

			//2、计算列数（页面宽/box宽）
			var boxWidth = box[0].offsetWidth;//盒子宽度
			var docWidth = document.documentElement.clientWidth;//页面宽度
			var cols = Math.floor(docWidth/boxWidth);

			// 3、设置main宽度
			main.style.width = boxWidth*cols+"px";

			// 4、对比高度
			var boxArray = [];//存放每一列高度
			for(var i=0;i<box.length;i++){
				if(i<cols){
					boxArray.push(box[i].offsetHeight);
				}else{
					// 5、计算最矮高度
					var minH = Math.min.apply(null,boxArray);//最矮高度
					var MinHindex = boxArray.indexOf(minH);
					//6、设置下一行图片位置
					box[i].style.position = "absolute";
					box[i].style.top = minH + "px";
					//左侧计算boxbox[i].style.left = boxWidth*MinHindex + "px";
					box[i].style.left = box[MinHindex].offsetLeft + "px";
					// 7、添加完后，将其高度做改变
					boxArray[MinHindex] += box[i].offsetHeight;
				}
			}
		}
		//检测是否具备记载条件
		function change(){
			//判断是否具备加载条件
			//1、获取box盒子
			var main = document.getElementById("main");
			var box = main.getElementsByClassName("box");
			// 2、获取最后一个块距离父级元素main的顶部距离
			var lastBoxH = box[box.length-1].offsetTop;
			var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
			var height = document.body.clientHeight || document.documentElement.clientHeight;
			if(scrollTop+height>lastBoxH){
				//将数据块放到页面里
				// (1)遍历数据
				for(var i=0;i<dataList.data.length;i++){
					// (2)创建元素节点
					var newBox = document.createElement("div");
					// newBox.setAttribute("class","box");
					newBox.className = "box animated slideInUp";
					main.appendChild(newBox);
					var newPic = document.createElement("div");
					newPic.className = "pic";
					newBox.appendChild(newPic);
					var newImg = document.createElement("img");
					newImg.src = "img/"+dataList.data[i].src;
					newPic.appendChild(newImg);
				}
				//新增后再次瀑布流
				waterFall();
			}
		}
	</script>
</body>
</html>

 

 

.

骆小胖
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现瀑布流效果
12-28
本文实例为大家分享了js实现瀑布流效果的具体代码，供大家参考，具体内容如下 CSS样式： <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 5px;} .imgbox{border: black ...
手把手教你用原生JS实现瀑布流
qq_45473786的博客
04-29 6401
看完这一篇一万字的blog，不可能不会瀑布流布局！！！
原生js实现瀑布流
最新发布
qq_41109621的博客
09-27 336
【代码】原生js实现瀑布流。
如何用原生js实现瀑布流布局【详细版！！！】
SH744的博客
09-10 403
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动天向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinteres，逐渐在国内流行开来。国内大多数清新站基本为这类风格。琳琅满目：整版以图片为主，大小不一的图片按照一定的规律排列。唯美：图片的风格以唯美的图片为主。操作简单：在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。例如下图：苏宁的官网 例如下图：网站布局 瀑布流布局的特点是等宽不等高。为了让最
原生JS实现瀑布流插件
10-18
本篇文章给大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解，对此有兴趣的读者们参考学习下吧。
原生JavaScript实现瀑布流布局
10-23
总的来说，这个原生JavaScript实现的瀑布流布局方案依赖于动态计算和绝对定位，它通过监听滚动事件，实现了页面滚动时内容的无限加载，同时保持了美观的瀑布流布局效果。这种方式相对于使用CSS Flexbox或Grid等现代...
原生Js实现瀑布流
jk54546的博客
05-20 190
原理 瀑布流图片：每列图片的宽度必须一致 瀑布流列数：列数=父容器的宽度/图片宽度 瀑布流总高度：其中一个列高度的最大值 瀑布流排列：图片加载完成后排列，所加载的图片依次定位在最小列数的下面 布局 1. HTML <div class="container"> 2. CSS items进行相对定位 item小盒子进行绝对定位 图片img设置display：block，取消图片间隙 鼠标触发效果： item：hover{ box-shadow:0 1
原生js实现瀑布流效果 函数封装
不会写代码的前端
10-23 426
实现目标：实现瀑布流布局、当滚动条滚动到一定距离时加载图片 瀑布流布局：结合窗口改变 定位第一行的盒子 第二行第一个盒子接到第一行最矮的盒子下面 当接完后更新最矮盒子 以此类推 滚动加载图片：案例是用数组对象实现图片加载 条件是当加载到最后一张图片一半+最后盒子的offsetTop小于等于屏幕的高度+滚动的距离时 加载图片 html+css &lt;!DOCTYPE html&gt; &lt;...
原生js实现瀑布流以及加载效果——李帅醒博客
李帅醒的博客
11-21 3295
今天教大家使用原生js实现瀑布流以及加载效果，下回再教大家使用使用原生JS实现响应式瀑布流布局，还是先从简单的入手！ 1、首先列数是固定的，不同的是高度，随机产生。 2、一排结束后，如第6个元素，是添加再上一排最短的位置，所以要做一个大小高度判断。 3、每次滚动条触发事件，加载新的元素（判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scroll
js瀑布流实现思路
玉超
12-16 3659
百度图片以及qq空间等还有一些像蘑菇街 发现啦之类的网站都用的是瀑布流布局模式，这种模式优点就是合理动态布局，使得图片页面表现有很强的视觉感染力，可以使得客户快速发现自己喜欢的图片。 并且大量图片处理时候减少浏览器处理图片消耗；在操作效果上像瀑布似的哗哗的出现图片 故而得此名（纯属想象） 闲来之余，实现一个自己的瀑布流demo，发现一些问题 总结一些经验，统统分享给大家： 实现思路如下：
原生JS实现瀑布流布局
越陌度阡
08-10 320
分享一个用原生JS实现的瀑布流布局，效果如下： 实现代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JS实现瀑布流布局</title> <style> .........
原生JS实现瀑布流
长河落日的博客
10-16 174
 JS代码 window.onload=function(){ imgnum("container","box"); imgheight("container","box") var imgData={"data":[{"src":"2.jpg"},{"src":"3.jpg"},{"src":&q
原生js实现瀑布流布局
白马非马的博客
07-25 5540
html结构<section id="main"> <div class="item"> <div class="pic"> <img src="images/p7.jpg" alt="">7 </div> </div> <div class="item"> <div class="pic">

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值