JS实现瀑布流布局（动态新增数据）

看今朝望初晴

已于 2022-03-22 00:04:13 修改

阅读量528

点赞数

文章标签： css html 前端 javascript

于 2022-03-21 23:55:55 首次发布

本文链接：https://blog.csdn.net/sxy20000105/article/details/123649538

版权

本文展示了如何使用JavaScript实现一个瀑布流布局的网页，包括初始布局、滚动加载新图片的功能。通过监听滚动事件，当页面滚动到底部时模拟AJAX加载新数据，并更新页面布局。内容涵盖HTML结构、CSS样式以及JavaScript代码实现。

摘要由CSDN通过智能技术生成

本文旨在用JS写一个瀑布流网页效果，初步实现一个基本的瀑布流布局，在页面滚动到底部后模拟ajax数据加载新图片功能。

实现思路：

1.首先对第一行图片进行布局，提取出高度最小一列的高度。

2.第二行开始每次将图片插入在最小高度的一列图片的下方。

3.页面滚动到最新图片的高度时，开始加载新数据。

html部分：

<ul id="waterfall">
	<li class="item"><div class="pic"><img src="img/pbl/1.jpg" ><p>采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味</p></div></li>
	<li class="item"><div class="pic"><img src="img/pbl/2.jpg" ><p>采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味</p></div></li>
	<li class="item"><div class="pic"><img src="img/pbl/3.jpg" ><p>采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味</p></div></li>
	<li class="item"><div class="pic"><img src="img/pbl/4.jpg" ><p>采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味</p></div></li>
	<li class="item"><div class="pic"><img src="img/pbl/5.jpg" ><p>采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味</p></div></li>
	<li class="item"><div class="pic"><img src="img/pbl/6.jpg" ><p>采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味</p></div></li>
	<li class="item"><div class="pic"><img src="img/pbl/7.jpg" ><p>采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味</p></div></li>
	<li class="item"><div class="pic"><img src="img/pbl/8.jpg" ><p>采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味</p></div></li>
</ul>

css部分：

*{
	margin: 0;
	padding: 0;
	list-style: none;
}
#waterfall{
	position: relative;
	margin: 0 auto;
}
#waterfall::after{
	content: '';
	display: block;
	clear: both;
}

#waterfall .item{
	float: left;
	padding: 10px;
	
}
.item .pic{
	padding: 10px;
	border: 1px solid #ccc;
}
#waterfall li p{
	width: 205px;
	font-size: 14px;
	color: gray;
}

JS部分：

window.onload=function(){
	waterFall()
}
var opage=0;
var a=true;


function waterFall(){
	var oul=document.getElementById('waterfall')
	var oli=document.getElementsByTagName('li');
	var olen=oli.length;
	var oliWidth=oli[0].offsetWidth;
	oul.style.width=oliWidth*4+1+'px';
	var arr=[];
	for(var i=0;i<olen;i++){
		if(i<4){
			arr.push(oli[i].offsetHeight);
		}else{
			var minHeight=Math.min(...arr);
			var index=getshort(minHeight,arr);
			oli[i].style.position='absolute';
			oli[i].style.left=index*oliWidth+'px';
			oli[i].style.top=minHeight+'px';
			arr[index]+=oli[i].offsetHeight;
		}
	}
}

window.onscroll=function(){
	if(!a)return;
	if(check()){
		a=false;
		setTimeout(function(){
			for(var j in data[opage]){
				var oul=document.getElementById('waterfall');
				var ali=document.createElement('li');
				var odiv=document.createElement('div');
				var oimg=document.createElement('img');
				var op=document.createElement('p');
				ali.className='item';
				odiv.className='pic';
				oul.appendChild(ali);
				ali.appendChild(odiv);
				odiv.appendChild(oimg);
				odiv.appendChild(op);
				oimg.src=data[opage][j].src;
				op.innerHTML=data[opage][j].title;
			}
			setTimeout(function(){
				opage++;
				console.log(opage)
				a=true;
				if(opage==data.length){
					a=false;
				}
				waterFall()
			},200)
		},10)
	}
}


// 获取最小高度
function getshort(min,arr){
	for(var i in arr){
		if(arr[i]==min){
		return i;
		}
	}
}

// 判断是否需要加载
function check(){
	var clientHeight=document.documentElement.clientHeight||document.body.clientHeight;
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var oli=document.getElementsByTagName('li');
	var lastHeight=oli[oli.length-1].offsetTop;
	if(lastHeight<clientHeight+scrollTop){
		return true;
	}else{
		return false;
	}
}

模拟数据部分：

var data = [
	[{
			'src': 'img/pbl/5.jpg',
			'title': '采用顶级的羊皮材料，更时尚，更有格调！搭配秋冬服饰更有独特的韵味！'
		},
		{
			'src': 'img/pbl/6.jpg',
			'title': '慢跑鞋无疑是整个2014年的时尚宠儿。除却功能性以及对足部的保护之外，选择一双款型时尚，配色亮眼的慢跑鞋绝对是您对自己时尚之道最好的诠释。乔丹时尚功能休闲慢跑鞋以出色的性能，时尚的造型'
		},
		{
			'src': 'img/pbl/7.jpg',
			'title': '圣迩尼—让你怦然心动，2014最新潮流性感个性款式，穿出不一样的时尚！'
		},
		{
			'src': 'img/pbl/8.jpg',
			'title': '潮男时尚T台秀'
		},
		{
			'src': 'img/pbl/9.jpg',
			'title': '潮流荧光色系'
		},
		{
			'src': 'img/pbl/10.jpg',
			'title': '新款男士商务几何图案修身夹克'
		},
		{
			'src': 'img/pbl/11.jpg',
			'title': '精梳棉面料，柔软舒适透气。'
		},
		{
			'src': 'img/pbl/12.jpg',
			'title': '舒适轻薄款，穿着轻薄，无负担感。修身版型，起到了很好的修身的效果，更加塑型。'
		},
	],
	[{
			'src': 'img/pbl/13.jpg',
			'title': '丝质柔滑面料 干净舒适。衣襟拼色，时尚有型，金属质地纽扣，完美细节品质。'
		},
		{
			'src': 'img/pbl/14.jpg',
			'title': '运用时兴的对比拼色元素，中袖设计与弹力袖口的组合既显瘦又端庄，散发都市丽人的知性气质。'
		},
		{
			'src': 'img/pbl/15.jpg',
			'title': '干练利落的尖领融合复古的做旧蓝色，于撞色对比间营造视觉冲击力，展现鲜明的时尚态度。'
		},
		{
			'src': 'img/pbl/16.jpg',
			'title': '鲜嫩的鹅黄色圆领配以拉链前襟十分吸引眼球，亲肤丝棉材质舒适贴合肌肤，恰到好处的休闲造型极富亲和力。'
		},
		{
			'src': 'img/pbl/17.jpg',
			'title': '淡雅桃与经典黑色的撞色拼接，展现大气利落气质。'
		},
		{
			'src': 'img/pbl/18.jpg',
			'title': '清新利落的白色衬衫小翻领设计，平添一份邻家女孩般清爽干净的气质。'
		},
		{
			'src': 'img/pbl/19.jpg',
			'title': '简约圆领，凸显优雅大方气质。裙身采用有浮雕质感的花型，更添女性柔美浪漫的古典气质。'
		},
		{
			'src': 'img/pbl/20.jpg',
			'title': '胸前以沙漏式的剪裁以及颇具设计感的隐形开叉设计，轻松衬出姣美丰满的胸型。'
		},
	],
	[{
			'src': 'img/pbl/21.jpg',
			'title': '甜美的白色波点，加上薄荷绿的清新映衬，简约中透漏女神气质。上班约会都是不错的选择。'
		},
		{
			'src': 'img/pbl/22.jpg',
			'title': '宽松的H版型连衣裙，腰部可自由调节，轻松藏起身体小赘肉。'
		},
		{
			'src': 'img/pbl/23.jpg',
			'title': '新款骷髅印花宽松无袖圆领连衣裙，穿出潮流范儿。'
		},
		{
			'src': 'img/pbl/24.jpg',
			'title': '天丝牛仔连衣裙，比雪纺更柔软透气，比棉更具光泽。'
		},
		{
			'src': 'img/pbl/25.jpg',
			'title': '独特的露背设计，展现女性妩媚性感的背部线条。'
		},
		{
			'src': 'img/pbl/26.jpg',
			'title': '职业男人着装导师，让不修边幅SAY GOODBYE。'
		},
		{
			'src': 'img/pbl/27.jpg',
			'title': '上身宽松有型，下身包臀设计，简洁大方的设计，流露出性感修身的好身材，得体大方。'
		},
		{
			'src': 'img/pbl/28.jpg',
			'title': '主珠为天然红玛瑙佛珠，加以天然蓝绿松顶珠为配珠，绿松石象征着“信赖和信任”，也给远征的人带来吉祥和好运，被誉为成功幸运之石。'
		},
	],
	[{
			'src': 'img/pbl/29.jpg',
			'title': '采用吸湿速干面料，穿着舒适，圆领设计，简洁大方；图案独有新疆风貌垂钓活动，彰显Discovery Expedition品牌非凡探索的户外精神。'
		},
		{
			'src': 'img/pbl/30.jpg',
			'title': '使用仿棉感速干面料，加入吸湿速干整理，含有碳素有除臭抗菌的功能。适合徒步、穿越、露营、日常等环境穿着。'
		},
		{
			'src': 'img/pbl/31.jpg',
			'title': '行走在野外，再不怕清晨露珠或是突如其来的毛毛雨打湿衣服，时刻保持舒爽。'
		},
		{
			'src': 'img/pbl/32.jpg',
			'title': '平整的领口，匀密的双车线，在这个短袖衬衫解禁的夏天显得精致而精神。'
		},
		{
			'src': 'img/pbl/33.jpg',
			'title': '撞色拼接，弹力面料，弹力包边下摆，后背均带有3M反光，增加骑行过程的安全性。'
		},
		{
			'src': 'img/pbl/34.jpg',
			'title': '面料凉爽顺滑，整体设计特别女人味。'
		},
		{
			'src': 'img/pbl/35.jpg',
			'title': '你可以穿着它去散步，去骑车，去户外，去郊游，晒着太阳而无需担心晒伤。'
		},
		{
			'src': 'img/pbl/36.jpg',
			'title': '拼色款式设计，透气轻薄的超轻面料，带给您完美舒适的质感，腋下面料冲孔设计，方便排汗与换气，更有利于户外活动穿着。'
		},
	],
	[{
			'src': 'img/pbl/37.jpg',
			'title': '王者之气尽显无疑，体现男人魅力。'
		},
		{
			'src': 'img/pbl/38.jpg',
			'title': '胸针采用的优质合金，经过精湛的电镀和抛光处理，呈现出华丽的光泽，手感顺滑不易生锈。长时间使用依旧持久弥新。'
		},
		{
			'src': 'img/pbl/39.jpg',
			'title': '造型精美，作为点缀出席各种场合。'
		},
		{
			'src': 'img/pbl/40.jpg',
			'title': '被用于出席颁奖典礼和参与派对的装扮眼镜。'
		},
		{
			'src': 'img/pbl/41.jpg',
			'title': '性感的大红在春夏季大放异彩，不再那么闪耀而浓重，转而以一种淡淡的姿态唤醒人们的感官视觉。'
		},
		{
			'src': 'img/pbl/42.jpg',
			'title': '潮流百搭，遮阳、修脸神奇，适合各种场合佩带。'
		},
		{
			'src': 'img/pbl/43.jpg',
			'title': '最具代表色彩的眼镜，一如既往的为年轻人增光。商务、休闲、驾车、运动，每一个户外场合都是最佳的搭配宠儿'
		},
		{
			'src': 'img/pbl/44.jpg',
			'title': '用黑色蕾丝做腰带，有很好的收腰效果，合体修身，简洁中透露随性感。'
		},
	],
	[{
			'src': 'img/pbl/45.jpg',
			'title': '豪放派展现内涵的首选。'
		},
		{
			'src': 'img/pbl/46.jpg',
			'title': '而立之年，终因一串友人相赠的佛珠心平气和，离苦得乐。'
		},
		{
			'src': 'img/pbl/47.jpg',
			'title': '中微喇收紧腰腹线条的同时，宽阔的小腿裤腿遮掩腿型，重塑小腿线条。'
		},
		{
			'src': 'img/pbl/48.jpg',
			'title': 'COACH 蔻驰 女士PVC经典LOGO卡其蓝色手提肩背包'
		},
		{
			'src': 'img/pbl/49.jpg',
			'title': '2014新品俏皮清新马卡龙拼色色系轻薄大容量长款钱包'
		},
		{
			'src': 'img/pbl/50.jpg',
			'title': 'COACH 女款皮革十字花纹柿红色手提肩背斜挎包'
		},
		{
			'src': 'img/pbl/51.jpg',
			'title': '每个包包都有其独特的风采，捧在手心里，随意搭配，精致可爱。'
		},
		{
			'src': 'img/pbl/52.jpg',
			'title': '镜面合成革易于清洁打理，金属后跟时尚潮流，款型简约，适于职场或宴会穿着。'
		},
	],
	[{
			'src': 'img/pbl/53.jpg',
			'title': '女士精品'
		},
		{
			'src': 'img/pbl/54.jpg',
			'title': '雀仔飞鸟灵感仿佛来自于法国田园风情的家居用品。艳红、薄荷绿以及暖粉的色彩应用在蓝调针织裙上，热烈之外更具浪漫气息。'
		},
		{
			'src': 'img/pbl/55.jpg',
			'title': '经典圆领设计，简单大方，宽松袖口，舒适大方。花鸟织锦缎拼接，复古典雅。细腻质地，手感弹滑，光泽柔和均匀，温和亲肤。'
		},
		{
			'src': 'img/pbl/56.jpg',
			'title': '宽松休闲给人带来自在穿着体验，彰显大方知性的文艺韵味。'
		},
		{
			'src': 'img/pbl/57.jpg',
			'title': '柔软顺滑，吸湿透气，一如第二层肌肤般，极为适合贴身穿着。'
		},
		{
			'src': 'img/pbl/58.jpg',
			'title': '至美简约，没有任何多余的装饰，凸显干练气质。'
		},
		{
			'src': 'img/pbl/59.jpg',
			'title': '永久典型的黑白条纹控，穿出潮男小清新。'
		},
		{
			'src': 'img/pbl/60.jpg',
			'title': '运动元素是不可替代的“范儿”，摆脱束缚，带着欢快的心情，在街头、户外随心游走。'
		},
	],
	[{
			'src': 'img/pbl/61.jpg',
			'title': '清甜马卡龙色系，是春夏不可或缺的主打元素。色调鲜活，条纹肌理自然，极具品质感。轻而易举地掠获少女芳心。'
		},
		{
			'src': 'img/pbl/62.jpg',
			'title': '阿玛尼休闲夏日时尚阿玛尼型男短袖 大经典logo腰带 阳光百搭牛仔裤 过一个轻松阳光夏日'
		},
		{
			'src': 'img/pbl/63.jpg',
			'title': '拼色连衣裙绝对是今夏的流行款'
		},
		{
			'src': 'img/pbl/64.jpg',
			'title': '时尚名媛黑色静谧显瘦'
		},
		{
			'src': 'img/pbl/65.jpg',
			'title': '甜美 休闲 名媛 OL 休闲 经典'
		},
		{
			'src': 'img/pbl/66.jpg',
			'title': '中微喇收紧腰腹线条的同时，宽阔的小腿裤腿遮掩腿型，重塑小腿线条。'
		},
		{
			'src': 'img/pbl/67.jpg',
			'title': '职业男人着装导师，让不修边幅SAY GOODBYE。'
		},
		{
			'src': 'img/pbl/68.jpg',
			'title': '不同色彩的拼接，彰显潮流风尚，无形中增添了几分青春活力。'
		},
	]
];

最终效果：