关于瀑布流布局还挺常见的。花瓣网目前用的似乎就是瀑布流布局。今天跟着视频做了一个。
学前端做这些小特效还是挺有感觉的QAQ。
代码来了
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>瀑布流</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="main">
<div class="box"><div class="pic"><img src="images/1.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/2.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/3.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/4.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/5.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/6.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/7.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/8.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/9.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/10.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/1.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/2.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/3.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/4.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/5.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/6.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/7.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/8.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/9.jpg" alt=""></div></div>
<div class="box"><div class="pic"><img src="images/10.jpg" alt=""></div></div>
</div>
<script src="js/index.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>
index.css
*{
margin: 0;
padding: 0;
border: none;
}
img{
vertical-align: top;
}
html,body{
width: 100%;
height: 100%;
}
#main{
position: relative;
}
.box{
float: left;
padding: 15px 0 0 15px;
}
.pic{
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
}
.pic img{
width: 250px;
}
index.js
window.onload = function () {
//1.实现瀑布流布局
waterFull("main", "box");
//2.动态加载图片
var timer1 = null;
window.onscroll = function () {
clearTimeout(timer1);
timer1 = setTimeout(function () {
if(checkWillLoadImage()){
//2.1造数据
var dataArr = [
{"src": "1.jpg"},
{"src": "2.jpg"},
{"src": "3.jpg"},
{"src": "4.jpg"},
{"src": "5.jpg"},
{"src": "6.jpg"},
{"src": "7.jpg"},
{"src": "8.jpg"},
{"src": "9.jpg"},
{"src": "1.jpg"},
{"src": "2.jpg"},
];
//2.2创建元素
for(var i=0; i<dataArr.length; i++){
var newBox = document.createElement("div");
newBox.className = "box";
$("main").appendChild(newBox);
var newPic = document.createElement("div");
newPic.className = "pic";
newBox.appendChild(newPic);
var newImg = document.createElement("img");
newImg.src = "images/" + dataArr[i].src;
newPic.appendChild(newImg);
}
//2.3重新布局
waterFull("main", "box");
}
}, 200);
}
//3.窗口的大小发生改变
var timer = null;
window.onresize = function () {
clearTimeout(timer);
timer = setTimeout(function () {
console.log(1);
waterFull("main", "box");
}, 200);
}
};
/**
* 实现瀑布流布局
*/
function waterFull(parent, child) {
//1. 父盒子居中
//1.1 获取所有盒子
var allBox = $(parent).getElementsByClassName(child);
//1.2获取子盒子的宽度
var boxW = allBox[0].offsetWidth;
//1.3获取屏幕宽度
var screenW = document.documentElement.clientWidth;
//1.4求出列数
var cols = parseInt(screenW / boxW);
//1.5父盒子居中
$(parent).style.width = cols * boxW + 'px';
$(parent).style.margin = "0 auto";
//2.子盒子的定位
//2.1定义高度数组
var heightArr = [], boxHeight, minBoxHeight = 0, minBoxIndex = 0;
//2.2遍历子盒子
for(var i=0;i<allBox.length;i++){
//2.2.1求出每个子盒子的高度
boxHeight = allBox[i].offsetHeight;
//2.2.2取出第一行盒子的高度放入高度数组
if(i < cols){ //第一行
heightArr.push(boxHeight);
allBox[i].style = '';
}else{ //剩余行
//1.取出最矮的盒子高度
minBoxHeight = Math.min.apply(this, heightArr);
//2.求出最矮盒子对应的索引
minBoxIndex = getMinBoxIndex(heightArr, minBoxHeight);
//3.子盒子定位
allBox[i].style.position = "absolute";
allBox[i].style.left = minBoxIndex * boxW + 'px';
allBox[i].style.top = minBoxHeight + 'px';
//4.更新数组中高度
heightArr[minBoxIndex] += boxHeight;
}
}
};
/**
* 拿到最矮盒子对应索引
* @param {*} arr
* @param {*} val
*/
function getMinBoxIndex(arr, val) {
for(var i=0;i<arr.length;i++){
if(arr[i] === val){
return i;
}
}
}
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
};
/**
* 判断是否具备加载图片的条件
* @param {*} params
*/
function checkWillLoadImage(params) {
//1.获取最后一个盒子
var allBox = document.getElementsByClassName("box");
var lastBox = allBox[allBox.length - 1];
//2.求出最后一个盒子自身高度的一半加上盒子距离顶部的高度
var lastBoxDis = lastBox.offsetHeight * 0.5 + lastBox.offsetTop;
//3.求出屏幕的高度
var screenW = document.body.clientHeight || document.documentElement.clientHeight;
//4.求出页面偏移浏览器的高度
var scrollTop = scroll().top;
return lastBoxDis <= screenW + scrollTop;
}
scroll.js
/**
*获取滚动的头部距离和滚动距离
*scroll().top scroll().left
*return {*}
*/
function scroll() {
if(window.pageYOffset !== null){
return {
top: window.pageYOffset,
left: window.pageXOffset
}
}else if(document.compatMode === "CSS1Compat"){ //如果浏览器按照w3c的规范来（兼容模式）
return {
top: document.documentElement.scrollTop,
left: document.documentElement.scrollLeft
}
}
return {
top: document.body.scrollTop,
left: document.body.scrollLeft
}
}
下面是用到的图片
本文地址：https://blog.csdn.net/qq_40888843/article/details/107477220
