add pagination.

app/images/images.ts

@@ -0,0 +1,15 @@
+interface Image {
+  src: string;
+  hash: string;
+}
+
+const getImagesList = async () => {
+  const res = await fetch("http://source.zcy.zone/images.json");
+  return await res.json() as Image[];
+};
+
+const cutImagesPage = (images: Image[], page: number, pageSize: number) => {
+  return images.slice((page - 1) * pageSize, page * pageSize);
+};
+
+export { getImagesList, cutImagesPage };

app/images/page.tsx

@@ -1,43 +1,67 @@
-"use client"
+"use client";
 
 import { title } from "@/components/primitives";
 
 import MasonryLayout from "../masonry";
 import ImagePreview from "@/components/preview";
+import { Pagination } from "@nextui-org/pagination";
+import { getImagesList, cutImagesPage } from "./images";
+import { useEffect, useState } from "react";
 
-const shuffleArray = (array: number[]) => {
-  for (let i = array.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [array[i], array[j]] = [array[j], array[i]];
-  }
-  return array;
-};
+interface Image {
+  src: string;
+  hash: string;
+}
 
-const ImageGallery = () => {
-  const maxIndex = 184;
-  const imageIndices = Array.from(
-    { length: maxIndex },
-    (_, index) => index + 1
-  );
-  const randomImageIndices = shuffleArray(imageIndices);
+interface ImageGalleryProps {
+  images: Image[];
+}
 
+const ImageGallery = ({ images }: ImageGalleryProps) => {
   return (
     <MasonryLayout>
-      {randomImageIndices.map((index) => (
-        <ImagePreview key={index} src={`./images/${index}.webp`} />
+      {images.map((image) => (
+        <ImagePreview key={image.hash} src={image.src} />
       ))}
     </MasonryLayout>
   );
 };
 
 export default function ImagesPage() {
+  const [images, setImages] = useState<Image[]>([]);
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+
+  const pageSize = 50;
+
+  useEffect(() => {
+    getImagesList().then((images) => {
+      setTotal(images.length);
+      setImages(cutImagesPage(images, page, pageSize));
+    });
+  }, [page]);
+
+  const handleChange = (page: number) => {
+    setPage(page);
+  };
+
   return (
     <>
       <div>
         <h2 className={title({ size: "sm" })}>瀑布流</h2>
       </div>
       <div className="mt-2">
-        <ImageGallery />
+        <ImageGallery images={images} />
+      </div>
+      {/* 水平居中固定底部 */}
+      <div className="mt-4 flex justify-center">
+        <Pagination
+          showControls
+          total={Math.ceil(total / pageSize)}
+          initialPage={1}
+          page={1}
+          onChange={handleChange}
+        />
       </div>
     </>
   );

app/log/page.tsx

@@ -33,6 +33,14 @@ const changeLog = [
       "说明：我要期中考试了，考完试会把友友们给我的一些资源添加上去，大家88。",
     ],
   },
+  {
+    date: "2023-11-10",
+    content: [
+      "优化：图片已用外链引用，节约程序本体打包大小。",
+      "新增：图片数量现已更新到344张原（184张），大家可以去瀑布流页面看看。",
+      "说明：瀑布流因为新增分页（目前每页50张）功能，回退为固定顺序呈现。",
+    ],
+  },
 ].reverse();
 
 export default function LogPage() {

package.json

@@ -21,6 +21,7 @@
     "@nextui-org/link": "2.0.19",
     "@nextui-org/listbox": "^2.1.13",
     "@nextui-org/navbar": "2.0.19",
+    "@nextui-org/pagination": "^2.0.26",
     "@nextui-org/snippet": "2.0.22",
     "@nextui-org/switch": "2.0.18",
     "@nextui-org/system": "^2.0.12",