jQuery实现瀑布流布局(1+X Web前端开发初级 例题)
黛琳ghz
帮助3人
文章目录
什么是瀑布流布局❓
(waterfall) 瀑布流布局是一种流行的网页布局方式，是指元素在页面的布局中像瀑布一样从上到下布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
🧩适用场景
📄题目要求
🧩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()方法
🎯最终效果
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhiajbbg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
excel打印预览压线压字怎么办
PHP中文网 06-22
