jQuery实现瀑布流布局-阿里云开发者社区

jQuery实现瀑布流布局

2022-11-07 203

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

什么是瀑布流布局❓

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

🧩适用场景

📄题目要求

🧩html代码

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

🧩css代码

body,ul {
padding: 0;
margin: 0;
}
.box {
width: 100%;
}
.boxul {
width: 100%;
}
.boxulli {
position: absolute;
list-style: none;
border: 1pxsolid#ccc;
padding: 1%;
margin: 1%;
width: 31%;
box-sizing: border-box;
}
.boxulliimg {
display: block;
width: 100%;
}

🧩js代码

$(function(){
pubuliu();
//随着窗口的大小变化重新执行函数// ____(1)_____(function() {$(window).resize(function() {
pubuliu();
  });
})
functionpubuliu(){
varli=$(".box ul li"),num=3,arr=[];
//获取每个li所占据的宽度// var liW=li.___(2)____;varliW=li.outerWidth();
//遍历每个li// li.___(3)____(function(index,val){li.each(function(index,val){
varscrW=window.innerWidthif(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{
varminHeight=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()方法

编辑

🎯最终效果