grid两列布局瀑布流思想：
- 将容器分为若干个网格，每行网格占2px(可以根据喜好自定义)
- 模拟每一块的高度，计算出每个块所占网格行数
- 利用span(跨行)关键字，重新设置块的起始位置
- 实现瀑布流布局
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
body {
margin: 0;
}
.masonry {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0 20px; /*网格的列间距*/
grid-auto-rows: 2px; /*网格行高*/
align-items: end; /*排列方式*/
}
.item {
background: #f8f8fa;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="masonry">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
<div class="item">item6</div>
<div class="item">item7</div>
<div class="item">item8</div>
<div class="item">item9</div>
<div class="item">item10</div>
<div class="item">item11</div>
<div class="item">item12</div>
<div class="item">item13</div>
<div class="item">item14</div>
<div class="item">item15</div>
<div class="item">item16</div>
<div class="item">item17</div>
<div class="item">item18</div>
<div class="item">item19</div>
<div class="item">item20</div>
<div class="item">item21</div>
<div class="item">item22</div>
<div class="item">item23</div>
<div class="item">item24</div>
<div class="item">item25</div>
</div>
<script>
window.addEventListener('load', () => {
// 模拟随机高度
document.querySelectorAll('.masonry > .item').forEach(item => {
item.style.height = `${Math.floor(Math.random() * 1000) + 100}px`
})
calcRows()
})
// 计算每个块的所占行数
const calcRows = () => {
const masonry = document.querySelector('.masonry')
const items = masonry.querySelectorAll('.item')
items.forEach((item, index) => {
// 给需要上下间隔的元素增加上间隔（每列第一个元素无需上间隔）
const gapRows = index >= 2 ? 8 : 0;
// 根据元素高度设置元素的需占行数
const rows = Math.ceil(item.clientHeight / 2) + gapRows;
// 当前的item跨越的行数，方便下一个块的排列
item.style.gridRowEnd = `span ${rows}`;
})
}
</script>
</body>
</html>
本篇是通过学习记录的笔记
