提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery实现瀑布流布局(1+X Web前端开发初级 例题)

jQueryWeb 实现 布局 前端开发 初级 例题 瀑布
2023-09-11 14:15:13 时间

文章目录

什么是瀑布流布局❓

🧩适用场景

📄题目要求

🧩html代码

🧩css代码

🧩js代码 

📰题目分析

🔗瀑布流布局原理

🔗jQuery方法分析 

🎯最终效果  

什么是瀑布流布局❓

(waterfall) 瀑布流布局是一种流行的网页布局方式，是指元素在页面的布局中像瀑布一样从上到下布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。

🧩适用场景

📄题目要求

🧩html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第四题-瀑布流</title>
		<script src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="box">
			<ul>
				<li><img src="img/jx1.jpg" alt="" /></li>
				<li><img src="img/jx10.jpg" alt="" /></li>
				<li><img src="img/jx2.jpg" alt="" /></li>
				<li><img src="img/jx14.jpg" alt="" /></li>
				<li><img src="img/jx16.jpg" alt="" /></li>
				<li><img src="img/jx15.jpg" alt="" /></li>
				<li><img src="img/jx2.jpg" alt="" /></li>
				<li><img src="img/jx5.jpg" alt="" /></li>
				<li><img src="img/jx6.jpg" alt="" /></li>
				<li><img src="img/jx9.jpg" alt="" /></li>
			</ul>
		</div>
	</body>
	<script src="js/index.js"></script>
</html>

🧩css代码

body,ul {
	padding: 0;
	margin: 0;
}
.box {
	width: 100%;
}
.box ul {
	width: 100%;
}
.box ul li {
	position: absolute;
	list-style: none;
	border: 1px solid #ccc;
	padding: 1%;
	margin: 1%;
	width: 31%;
	box-sizing: border-box;
}
.box ul li img {
	display: block;
	width: 100%;
}

🧩js代码 

$(function(){
	pubuliu();
    //随着窗口的大小变化重新执行函数
	// ____(1)_____(function() {
	$(window).resize(function() {
		pubuliu();
	});
})
function pubuliu(){
	var li=$(".box ul li"),num=3,arr=[];
    //获取每个li所占据的宽度
	// var liW=li.___(2)____;
	var liW=li.outerWidth();

	//遍历每个li
// li.___(3)____(function(index,val){
li.each(function(index,val){
		var scrW=window.innerWidth
		if(scrW<550){
			num=2;
			li.css("width","48%")
		}else{
			num=3;
			li.css("width","31%")
		}
			
		if(index<num){
			$(val).css({
				top:0,
				// left:__(4)____+"px"
				left:index*liW+index*20+"px"
			})

			liH=li.outerHeight(true)
			arr[index]=$(this).outerHeight(true)
		}else{
			var minHeight=arr[0],mindex=0;
       //遍历数组
			// arr.__(5)_____(function(val,index){
			arr.forEach(function(val,index){
				if(minHeight>val){
					minHeight=val;
					mindex=index;
				}
			})
			$(this).css({
				// top:__(6)_____,
				// left:__(7)____+"px"
				top:minHeight,
				left:mindex*liW+mindex*20+"px"
			})
			// arr[___(8)___]=minHeight+$(this).outerHeight(true)
			arr[mindex]=minHeight+$(this).outerHeight(true)
		}
	})	
}

📰题目分析

首先创建一个无序列表，把图片放入列表了，列表使用绝对定位固定在页面第一行，固定好如下。

🔗瀑布流布局原理

1.通过window.innerWidth计算页面的宽度，计算出页面可放数据块的列数。


2.将各个li里面的图片高度尺寸记入数组中
3.然后用数组记录每一列的总高度。

4.将未布置的元素，依次布置到高度最小的那一列，然后更新这一列的高度
5.当浏览器窗口大小改变时，重新排放(列数随页面宽度而改变，因而需要重新排放)。

🔗jQuery方法分析 

1.resize() 方法

 

2.each() 方法

3.forEach()方法

forEach()方法为每个数组元素调用一次函数（回调函数）。

 

4.Window innerWidth 和 innerHeight 属性

Window outerWidth 和 outerHeight 属性

outerWidth()方法

outerHeight()方法

🎯最终效果 

相关文章