最近，越来越多的网站开始使用网格布局（grid layout）来实现页面的布局。在设计网格布局时，有时我们需要在同一页面中实现分页效果。本文将探讨如何在网格布局中实现分页效果。
分页效果的实现方法
实现分页效果的方法有很多种，但都离不开以下两种核心思路：
- 使用条件语句来根据用户的操作来控制分页；
- 使用 CSS 选择器控制分页，从而让不同的网格图块在不同的分页中出现。
接下来，我们将依次详细介绍这两种方法。
使用条件语句控制分页
这种方法是最直观的方法。我们可以借助 JavaScript 或者 HTML5 的新特性来实现分页效果。
下面是一个使用 JavaScript 实现分页效果的示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>分页示例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
padding: 30px;
}
.grid-item {
background-color: #ccc;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 2px 2px #00000040;
text-align: center;
font-size: 24px;
}
#page-1 .grid-item:nth-child(n + 5) {
display: none;
}
#page-2 .grid-item:nth-child(1),
#page-2 .grid-item:nth-child(2),
#page-2 .grid-item:nth-child(3),
#page-2 .grid-item:nth-child(4) {
display: none;
}
#page-2 .grid-item:nth-child(n + 5) {
display: block;
}
</style>
</head>
<body>
<div class="grid-container" id="page-1">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
</div>
<div class="grid-container" id="page-2">
<div class="grid-item">17</div>
<div class="grid-item">18</div>
<div class="grid-item">19</div>
<div class="grid-item">20</div>
<div class="grid-item">21</div>
<div class="grid-item">22</div>
<div class="grid-item">23</div>
<div class="grid-item">24</div>
<div class="grid-item">25</div>
<div class="grid-item">26</div>
<div class="grid-item">27</div>
<div class="grid-item">28</div>
</div>
<script>
let currentPage = 1;
document.getElementById('page-1').style.display = 'grid';
document.getElementById('page-2').style.display = 'none';
document.getElementById('prev-page-btn').onclick = function() {
if (currentPage > 1) {
currentPage--;
document.getElementById('page-' + currentPage).style.display = 'grid';
document.getElementById('page-' + (currentPage + 1)).style.display = 'none';
}
};
document.getElementById('next-page-btn').onclick = function() {
if (currentPage < 2) {
currentPage++;
document.getElementById('page-' + currentPage).style.display = 'grid';
document.getElementById('page-' + (currentPage - 1)).style.display = 'none';
}
};
</script>
</body>
</html>上面的代码中，我们首先定义了两个网格容器 page-1 和 page-2 ，在 page-1 中放置了 16 个网格图块，接着通过 CSS 选择器控制每个网格图块在不同的分页中出现。例如，使用 #page-1 .grid-item:nth-child(n + 5) 让 page-1 中的第 5 个图块（即 5、6、7、8、9、10、11、12、13、14 和 15）在第 2 页中不显示。
接着，我们编写了两个事件监听器，分别监听上一页和下一页的按钮点击事件。事件监听器会控制分页的实现。
使用 CSS 选择器控制分页
在上一节中，我们使用了 CSS 选择器控制分页。但这并不是唯一的方式。我们也可以通过使用伪元素（::before 和 ::after）控制不同的分页来实现分页效果。
下面是一个使用伪元素实现分页效果的示例代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>分页示例</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
padding: 30px;
}
.grid-item {
background-color: #ccc;
padding: 30px;
border-radius: 10px;
box-shadow: 0px 2px 2px #00000040;
text-align: center;
font-size: 24px;
}
.grid-container::after {
content: "";
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
padding: 30px;
grid-column: 1 / -1;
}
.grid-container::before {
content: "";
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 30px;
padding: 30px;
grid-column: 1 / -1;
}
#page-1 .grid-item:nth-child(n + 5) {
display: none;
}
#page-2 .grid-item:nth-child(1),
#page-2 .grid-item:nth-child(2),
#page-2 .grid-item:nth-child(3),
#page-2 .grid-item:nth-child(4) {
display: none;
}
#page-2 .grid-item:nth-child(n + 5) {
display: block;
}
.grid-container::after {
content: "2";
background-color: #4CAF50;
color: #fff;
text-align: center;
border-radius: 10px;
padding: 5px;
cursor: pointer;
}
.grid-container::before {
content: "1";
background-color: #4CAF50;
color: #fff;
text-align: center;
border-radius: 10px;
padding: 5px;
cursor: pointer;
}
.grid-container::after:hover,
.grid-container::before:hover {
background-color: #2196F3;
}
#page-1 {
grid-area: 1 / 1 / 2 / -1;
}
#page-2 {
grid-area: 2 / 1 / 3 / -1;
display: none;
}
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + .grid-container {
display: grid;
}
</style>
</head>
<body>
<input type="radio" name="page" id="page-1-radio" checked>
<label for="page-1-radio">第一页</label>
<input type="radio" name="page" id="page-2-radio">
<label for="page-2-radio">第二页</label>
<div class="grid-container" id="page-1">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
<div class="grid-item">13</div>
<div class="grid-item">14</div>
<div class="grid-item">15</div>
<div class="grid-item">16</div>
</div>
<div class="grid-container" id="page-2">
<div class="grid-item">17</div>
<div class="grid-item">18</div>
<div class="grid-item">19</div>
<div class="grid-item">20</div>
<div class="grid-item">21</div>
<div class="grid-item">22</div>
<div class="grid-item">23</div>
<div class="grid-item">24</div>
<div class="grid-item">25</div>
<div class="grid-item">26</div>
<div class="grid-item">27</div>
<div class="grid-item">28</div>
</div>
</body>
</html>上面的代码中，我们首先定义了两个网格容器 page-1 和 page-2 ，接着在伪元素 ::before 和 ::after 中分别定义了两个网格容器，用于控制分页。接下来，我们使用 CSS 选择器控制每个网格图块在不同的分页中出现，并在伪元素 ::before 和 ::after 中添加了分页码，从而让用户能够明确当前页面所处的分页是第几页。
在 HTML 中，我们添加了两个 input 元素，用于控制分页。当选中第一页时，分页容器 page-1 会显示，page-2 则会隐藏；反之亦然。
总结
在网格布局中实现分页效果不仅提高了页面的美观程度，还可使用户快速方便的定位所需内容。本文介绍了两种实现分页效果的方法，读者可根据实际情况选择最适合自己的方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d5ad67d4982a6ebeb5ba6