最近，越来越多的网站开始使用网格布局（grid layout）来实现页面的布局。在设计网格布局时，有时我们需要在同一页面中实现分页效果。本文将探讨如何在网格布局中实现分页效果。
分页效果的实现方法
实现分页效果的方法有很多种，但都离不开以下两种核心思路：
- 使用条件语句来根据用户的操作来控制分页；
- 使用 CSS 选择器控制分页，从而让不同的网格图块在不同的分页中出现。
接下来，我们将依次详细介绍这两种方法。
使用条件语句控制分页
这种方法是最直观的方法。我们可以借助 JavaScript 或者 HTML5 的新特性来实现分页效果。
下面是一个使用 JavaScript 实现分页效果的示例代码：
--------- -----
------
------
-------------------
-------
--------------- -
-------- -----
---------------------- --------- -----
--------- -----
-------- -----
-
---------- -
----------------- -----
-------- -----
-------------- -----
----------- --- --- --- ----------
----------- -------
---------- -----
-
------- ---------------------- - -- -
-------- -----
-
------- ------------------------
------- ------------------------
------- ------------------------
------- ----------------------- -
-------- -----
-
------- ---------------------- - -- -
-------- ------
-
--------
-------
------
---- ---------------------- ------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
------
---- ---------------------- ------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
------
--------
--- ----------- - --
----------------------------------------------- - -------
----------------------------------------------- - -------
------------------------------------------------ - ---------- -
-- ------------ - -- -
--------------
------------------------------- - -------------------------- - -------
------------------------------- - ------------ - ----------------- - -------
-
--
------------------------------------------------ - ---------- -
-- ------------ - -- -
--------------
------------------------------- - -------------------------- - -------
------------------------------- - ------------ - ----------------- - -------
-
--
---------
-------
-------上面的代码中，我们首先定义了两个网格容器 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）控制不同的分页来实现分页效果。
下面是一个使用伪元素实现分页效果的示例代码：
--------- -----
------
------
-------------------
-------
--------------- -
-------- -----
---------------------- --------- -----
--------- -----
-------- -----
-
---------- -
----------------- -----
-------- -----
-------------- -----
----------- --- --- --- ----------
----------- -------
---------- -----
-
---------------------- -
-------- ---
-------- -----
---------------------- --------- -----
--------- -----
-------- -----
------------ - - ---
-
----------------------- -
-------- ---
-------- -----
---------------------- --------- -----
--------- -----
-------- -----
------------ - - ---
-
------- ---------------------- - -- -
-------- -----
-
------- ------------------------
------- ------------------------
------- ------------------------
------- ----------------------- -
-------- -----
-
------- ---------------------- - -- -
-------- ------
-
---------------------- -
-------- ----
----------------- --------
------ -----
----------- -------
-------------- -----
-------- ----
------- --------
-
----------------------- -
-------- ----
----------------- --------
------ -----
----------- -------
-------------- -----
-------- ----
------- --------
-
-----------------------------
----------------------------- -
----------------- --------
-
------- -
---------- - - - - - - ---
-
------- -
---------- - - - - - - ---
-------- -----
-
------------------- -
-------- -----
-
--------------------------- - --------------- -
-------- -----
-
--------
-------
------
------ ------------ ----------- ----------------- --------
------ ------------------------------
------ ------------ ----------- ------------------
------ ------------------------------
---- ---------------------- ------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- -------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
------
---- ---------------------- ------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
---- --------------------------
------
-------
-------上面的代码中，我们首先定义了两个网格容器 page-1 和 page-2 ，接着在伪元素 ::before 和 ::after 中分别定义了两个网格容器，用于控制分页。接下来，我们使用 CSS 选择器控制每个网格图块在不同的分页中出现，并在伪元素 ::before 和 ::after 中添加了分页码，从而让用户能够明确当前页面所处的分页是第几页。
在 HTML 中，我们添加了两个 input 元素，用于控制分页。当选中第一页时，分页容器 page-1 会显示，page-2 则会隐藏；反之亦然。
总结
在网格布局中实现分页效果不仅提高了页面的美观程度，还可使用户快速方便的定位所需内容。本文介绍了两种实现分页效果的方法，读者可根据实际情况选择最适合自己的方法。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652d5ad67d4982a6ebeb5ba6