纯CSS实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Water Fall Layout</title>
</head>
<body>
<div class="water-fall-box">
<div class="item" style="height: 200px;">1</div>
<div class="item" style="height: 250px;">2</div>
<div class="item" style="height: 100px;">3</div>
<div class="item" style="height: 220px;">4</div>
<div class="item" style="height: 300px;">5</div>
<div class="item" style="height: 230px;">6</div>
<div class="item" style="height: 240px;">7</div>
<div class="item" style="height: 200px;">8</div>
<div class="item" style="height: 250px;">9</div>
<div class="item" style="height: 100px;">10</div>
<div class="item" style="height: 220px;">11</div>
<div class="item" style="height: 300px;">12</div>
<div class="item" style="height: 230px;">13</div>
<div class="item" style="height: 240px;">14</div>
</div>
<style>
.water-fall-box {
column-count: 3;
column-gap: 15px;
}
.item {
break-inside: avoid;
width: 100%;
height: auto;
margin: 15px 0;
border:1px solid #0a3069;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</html>
htmlJavaScript实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Water Fall Layout</title>
</head>
<body>
<div class="water-fall-box">
<div class="item" style="height: 200px;">1</div>
<div class="item" style="height: 250px;">2</div>
<div class="item" style="height: 100px;">3</div>
<div class="item" style="height: 220px;">4</div>
<div class="item" style="height: 300px;">5</div>
<div class="item" style="height: 230px;">6</div>
<div class="item" style="height: 240px;">7</div>
<div class="item" style="height: 200px;">8</div>
<div class="item" style="height: 250px;">9</div>
<div class="item" style="height: 100px;">10</div>
<div class="item" style="height: 220px;">11</div>
<div class="item" style="height: 300px;">12</div>
<div class="item" style="height: 230px;">13</div>
<div class="item" style="height: 240px;">14</div>
</div>
</body>
<script type="text/javascript">
window.onload = refreshWaterFall
window.addEventListener("resize",refreshWaterFall)
function refreshWaterFall() {
let waterFallBox = document.querySelector(".water-fall-box")
let width = waterFallBox.offsetWidth
let children = waterFallBox.children
let childWidth = children[0].offsetWidth
let column = Math.floor(width / (childWidth+20));
let heightList = []
for (let index = 0; index < children.length; index++) {
let item = children[index]
if (index < column)
heightList.push(item.offsetHeight + 10 +waterFallBox.offsetTop)
else {
console.log(heightList)
let targetIndex = heightList.findIndex(value => value === Math.min(...heightList))
item.style.position = "absolute"
item.style.left = (children[targetIndex].offsetLeft - 10) + 'px'
item.style.top = heightList[targetIndex] + 'px'
heightList[targetIndex] += item.offsetHeight + 10
}
}
waterFallBox.style.height = (Math.max(...heightList)) + "px"
}
</script>
<style>
.water-fall-box {
}
.item {
float: left;
width: 250px;
margin: 0 10px;
border: 1px solid #0a3069;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</html>
html若在vue中使用，只需要把onload内容放在mounted()内即可
