实现瀑布流的简单流程

最新推荐文章于 2024-09-06 17:10:02 发布

翻译最新推荐文章于 2024-09-06 17:10:02 发布 · 338 阅读

js技术同时被 2 个专栏收录

41 篇文章

订阅专栏

css

11 篇文章

订阅专栏

本文详细介绍了一种使用HTML、CSS和JavaScript实现的瀑布流布局方法，并结合滚动加载功能，使得页面在滚动到接近底部时自动加载更多内容，提供流畅的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*近段时间小啊刚再找工作时遇到了一个小问题，那就是瀑布流，再次分享给大家，

`<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#box{margin: 0 auto;width: 1140px;position: relative;}
			.div1{padding: 8px;position: absolute;}
			.div2{width: 200px;padding: 5px;border: 1px solid #999;}
			.img{width: 200px;display: block;}
		</style>
		<script type="text/javascript">
			/*实现原理：通过position绝对定位的方式，判断哪一列当前高度最小，
			然后把下一张图片定位到那一列下面。
			*/
			window.function (){
				var oBox=document.getElementById('box');
				var aDiv1=[];
				var flag=true;//用来判断是否可以加载数据
				/*实际项目中从后台导入数据，这里为演示，用json假数据块*/
				var json={
					'data':[
						{'src':'img/111.jpg'},{'src':'img/22.jpg'},{'src':'img/timg.jpg'},
						{'src':'img/hangye001_22_20_20.jpg'},{'src':'img/hangye001_22_20_26_35.jpg'},{'src':'img/hangye001_23.jpg'},
						{'src':'img/001baio_05.jpg'},{'src':'img/002baio.jpg'},{'src':'img/hangye001_25_32.jpg'},
						{'src':'img/111.jpg'},{'src':'img/111.jpg'},{'src':'img/111.jpg'}
					],
					'imgH':[
						{'height':'232px'},{'height':'264px'},{'height':'300px'},
						{'height':'289px'},{'height':'267px'},{'height':'278px'},
						{'height':'300px'},{'height':'234px'},{'height':'271px'},
						{'height':'251px'},{'height':'363px'},{'height':'333px'}
					]
				}
				function getCont(){
						/*创建节点。加载数据*/
						/*在box中插入下面所示节点,
						div1设置padding的right,top的值，让每一列之间有空隙。
						<div class="div1">
							<div class="div2">
								<img src=""/>
							</div>
						</div>
						*/
						for (var i=0;i<json.data.length;i++) {
							var oDiv1=document.createElement('div');
							oDiv1.className='div1';
							var oDiv2=document.createElement('div');
							oDiv2.className='div2';
							oDiv1.appendChild(oDiv2);
							var oImg=document.createElement('img');
							oImg.className='img';
							oImg.src=json.data[i].src;
							oImg.style.height=json.imgH[i].height;
							oDiv2.appendChild(oImg);
							oBox.appendChild(oDiv1);
							/*把创建的div1节点放到数组里*/
							aDiv1.push(oDiv1);
						}
						var arrH=[];
						for (var i=0;i<aDiv1.length;i++) {
							if(i<5){
							/*把前面5个div1从左到右排列，并把它的高度放进数组arrH*/
								arrH.push(aDiv1[i].offsetHeight);
								aDiv1[i].style.left=aDiv1[0].offsetWidth*i+'px';
							}else{
							/*else从第六个开始，获取到数组arrH中的最小值及其索引，
							left值为一个div1的宽度乘以索引，top为数组中最小的那个数，
							然后数组中最小的数加上新的div1的高度，然后继续循环
							*/
								var minH=Math.min.apply(null,arrH);
								for (var j=0;j<arrH.length;j++) {
									if(arrH[j]==minH){
										var index=j;
									}
								}
								aDiv1[i].style.left=aDiv1[0].offsetWidth*index+'px';
								aDiv1[i].style.top=minH+'px';
								arrH[index]+=aDiv1[i].offsetHeight;
							}
						}
						flag=true;//当数据都加载完让flag为true
				}
				getCont();
				/*上面已基本实现瀑布流布局，下面就是滚动加载数据了*/
				window.onscroll=function (){
					var lastT=aDiv1[aDiv1.length-1].offsetTop;
					var scroT=document.documentElement.scrollTop||document.body.scrollTop;
					if(lastT<scroT+document.documentElement.clientHeight){
					//这里判断加载是当图片加载到最后一个刚露出就加载数据
						if(flag){
							flag=false;//进来先让flag为false，防止未加载完数据又加载数据
							getCont();
						}
					}
				}
			};
		</script>
		
	</head>
	<body>
		<div id="box">
		
		</div>
	</body>
</html>`

此篇文章借鉴别人改变而来。但功能点都基本实现，各位可直接