一、Demo
<1>.要求
多个等宽的图片进行穿插排序成六列,
并且在目前显示的最后一张图片显示之后,
再进行下拉时能够在进行加载其他图片,每次下拉显示20-30张图片。
<2>.功能
随着页面滚动条向下滚动,
这种布局还会不断加载数据块并附加至当前尾部。
二、实现原理
Js部分主要负责图片的定位
通过获取宽度,获取第一行排列图片数量,从而收集高度
再通过创建对象达到保存高度的数据,然后进行比较,得到最小高度,从而实现定位(position)
三、代码
<1>.Html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流布局</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="content">
<div>
<img src="./Img/1.jfif" alt="">
</div>
<div>
<img src="./Img/2.jfif" alt="">
</div>
<div>
<img src="./Img/3.jfif" alt="">
</div>
<div>
<img src="./Img/4.jfif" alt="">
</div>
<div>
<img src="./Img/5.jfif" alt="">
</div>
<div>
<img src="./Img/6.jfif" alt="">
</div>
<div>
<img src="./Img/7.jfif" alt="">
</div>
<div>
<img src="./Img/8.jpg" alt="">
</div>
<div>
<img src="./Img/9.jfif" alt="">
</div>
<div>
<img src="./Img/10.jfif" alt="">
</div>
<div>
<img src="./Img/11.jfif" alt="">
</div>
<div>
<img src="./Img/12.jfif" alt="">
</div>
<div>
<img src="./Img/13.jpg" alt="">
</div>
<div>
<img src="./Img/14.jfif" alt="">
</div>
<div>
<img src="./Img/1.jfif" alt="">
</div>
<div>
<img src="./Img/2.jfif" alt="">
</div>
<div>
<img src="./Img/3.jfif" alt="">
</div>
<div>
<img src="./Img/4.jfif" alt="">
</div>
<div>
<img src="./Img/5.jfif" alt="">
</div>
<div>
<img src="./Img/6.jfif" alt="">
</div>
<div>
<img src="./Img/7.jfif" alt="">
</div>
<div>
<img src="./Img/8.jpg" alt="">
</div>
<div>
<img src="./Img/9.jfif" alt="">
</div>
<div>
<img src="./Img/10.jfif" alt="">
</div>
<div>
<img src="./Img/11.jfif" alt="">
</div>
<div>
<img src="./Img/12.jfif" alt="">
</div>
<div>
<img src="./Img/13.jpg" alt="">
</div>
<div>
<img src="./Img/14.jfif" alt="">
</div>
<div>
<img src="./Img/1.jfif" alt="">
</div>
<div>
<img src="./Img/2.jfif" alt="">
</div>
<div>
<img src="./Img/3.jfif" alt="">
</div>
<div>
<img src="./Img/4.jfif" alt="">
</div>
<div>
<img src="./Img/5.jfif" alt="">
</div>
<div>
<img src="./Img/6.jfif" alt="">
</div>
<div>
<img src="./Img/7.jfif" alt="">
</div>
<div>
<img src="./Img/8.jpg" alt="">
</div>
<div>
<img src="./Img/9.jfif" alt="">
</div>
<div>
<img src="./Img/10.jfif" alt="">
</div>
<div>
<img src="./Img/11.jfif" alt="">
</div>
<div>
<img src="./Img/12.jfif" alt="">
</div>
<div>
<img src="./Img/13.jpg" alt="">
</div>
<div>
<img src="./Img/14.jfif" alt="">
</div>
<div>
<img src="./Img/1.jfif" alt="">
</div>
<div>
<img src="./Img/2.jfif" alt="">
</div>
<div>
<img src="./Img/3.jfif" alt="">
</div>
<div>
<img src="./Img/4.jfif" alt="">
</div>
<div>
<img src="./Img/5.jfif" alt="">
</div>
<div>
<img src="./Img/6.jfif" alt="">
</div>
<div>
<img src="./Img/7.jfif" alt="">
</div>
<div>
<img src="./Img/8.jpg" alt="">
</div>
<div>
<img src="./Img/9.jfif" alt="">
</div>
<div>
<img src="./Img/10.jfif" alt="">
</div>
<div>
<img src="./Img/11.jfif" alt="">
</div>
<div>
<img src="./Img/12.jfif" alt="">
</div>
<div>
<img src="./Img/13.jpg" alt="">
</div>
<div>
<img src="./Img/14.jfif" alt="">
</div>
</div>
<script src="./index.js"></script>
</body>
</html>
<2>.Css部分
*{
margin: 0;
padding: 0;
}
.content{
width: 100%;
height: 3000px;
}
.content>div{
float: left;
border: 1px solid #ccc;
padding: 10px;
}
.content>div>img{
width: 200px;
}
<3>.Js部分
window.onload = function(){
var content = document.getElementsByClassName('content')[0]
var contentWidth = content.offsetWidth
//获取宽度
var imgs = content.children;
var imgsWidth = imgs[0].offsetWidth
//获取单个图片宽度
var nums = Math.floor(contentWidth / imgsWidth);
// console.log(nums);
//获取一行可以排多少图片
var arrHeight = []
//收集第一排的所有高度
for(var i=0; i<imgs.length;i++){
if(i<nums){//这里都是第一行的元素
arrHeight.push(imgs[i].offsetHeight)
}else{
//创建第一个元素的对象
var obj={
minH:arrHeight[0],
minI:0
}
for(var j=0;j<arrHeight.length;j++){ //比较高度,获得最小高度
if(arrHeight[j]<obj.minH){
obj.minH = arrHeight[j],
obj.minI = j
}
}
console.log(obj);
imgs[i].style.position="absolute"
imgs[i].style.left= imgs[obj.minI].offsetLeft+"px"
imgs[i].style.top = obj.minH+'px'
arrHeight[obj.minI] = arrHeight[obj.minI]+ imgs[i].offsetHeight
}
}
}
四、效果展示
瀑布流布局