diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx
index eb003c9..eb00eaa 100644
--- a/src/components/image/index.tsx
+++ b/src/components/image/index.tsx
@@ -72,3 +72,35 @@ export default memo(function Image({
     </InView>
   );
 });
+
+export function ImageBasic({
+  url,
+  fallbackUrl = DefaultFallbackUrl,
+  observer,
+  callback,
+  children,
+}: Omit<ImageProps, "width" | "height"> & {
+  children?: ReactElement;
+}) {
+  const res = useLoading(url),
+    { isLoaded, success } = res,
+    real_fallback_url = fallbackUrl || DefaultFallbackUrl;
+  const once_callback = useCallback(Once(callback!!), []);
+  return (
+    <InView>
+      {({ inView, ref, entry }) => (
+        <div ref={ref} className={styles.imgWrapper}>
+          <img
+            src={isLoaded && success ? url : real_fallback_url}
+            style={{
+              opacity: isLoaded ? 1.0 : 0.09,
+            }}
+            alt=''
+          />
+          <>{observer && inView && once_callback(inView)}</>
+          {children}
+        </div>
+      )}
+    </InView>
+  );
+}
diff --git a/src/index.less b/src/index.less
index 064e4ce..2c7d2f3 100644
--- a/src/index.less
+++ b/src/index.less
@@ -4,17 +4,17 @@
     margin: 0;
 }
 
-.feedContainer {
-    margin: 0 auto;
-    max-width: 1200px;
-    display: flex;
-    align-items: flex-start;
-    position: relative;
-    width: 100%;
+// .feedContainer {
+//     margin: 0 auto;
+//     // max-width: 1200px;
+//     display: flex;
+//     align-items: flex-start;
+//     position: relative;
+//     width: 100%;
 
-    .element-item {
-        min-width: 200px;
-        box-sizing: border-box;
-        padding: 0 5px;
-    }
-}
\ No newline at end of file
+//     .element-item {
+//         min-width: 200px;
+//         box-sizing: border-box;
+//         padding: 0 5px;
+//     }
+// }
\ No newline at end of file
diff --git a/src/routers/video/index.tsx b/src/routers/video/index.tsx
index a94cc1a..de59aa0 100644
--- a/src/routers/video/index.tsx
+++ b/src/routers/video/index.tsx
@@ -3,7 +3,7 @@ export default function VideoPage() {
   return (
     <>
       <h1>videopage</h1>
-      {/* <VideoMasonry /> */}
+      <VideoMasonry />
     </>
   );
 }
diff --git a/src/routers/video/masonry.tsx b/src/routers/video/masonry.tsx
index 6db1f2a..44ab401 100644
--- a/src/routers/video/masonry.tsx
+++ b/src/routers/video/masonry.tsx
@@ -8,6 +8,7 @@ import {
   ImageSize,
 } from "@components/image/tool";
 import { Masonry as Masonic_masonry } from "masonic";
+import Grid from "@mui/material/Unstable_Grid2";
 import ImageShouldResizeProview from "@components/proview/imageSize";
 import { VideoRouterImageCard } from "./masonryItem";
 /**
@@ -50,13 +51,13 @@ export default function VideoMasonry(props: any) {
               "face"
             );
 
-          if (imageSize.success === true) {
-            return {
-              ...itemRes,
-              width: order_width,
-              height: getResizeHeight(imageSize, order_width),
-            };
-          }
+          // if (imageSize.success === true) {
+          //   return {
+          //     ...itemRes,
+          //     width: order_width,
+          //     height: Math.floor((order_width * 3) / 4),
+          //   };
+          // }
           return itemRes;
         }),
       ]);
@@ -66,14 +67,22 @@ export default function VideoMasonry(props: any) {
   return (
     <div className='feedContainer'>
       <ImageShouldResizeProview>
-        <Masonic_masonry
-          items={lists}
-          columnWidth={order_width}
-          rowGutter={10}
-          maxColumnCount={5}
-          render={VideoRouterImageCard}
-          overscanBy={Infinity}
-        />
+        <Grid
+          container
+          spacing={2}
+          columns={{
+            lg: 10,
+            md: 8,
+            sm: 6,
+            xs: 4,
+          }}
+        >
+          {lists.map((item, index) => (
+            <Grid key={index} xs={2}>
+              <VideoRouterImageCard data={item} />
+            </Grid>
+          ))}
+        </Grid>
       </ImageShouldResizeProview>
     </div>
   );
diff --git a/src/routers/video/masonryItem.tsx b/src/routers/video/masonryItem.tsx
index 695ea9e..7c0b753 100644
--- a/src/routers/video/masonryItem.tsx
+++ b/src/routers/video/masonryItem.tsx
@@ -1,4 +1,4 @@
-import Image from "@components/image";
+import { ImageBasic } from "@components/image";
 import { FC } from "react";
 import SlowMotionVideoSharpIcon from "@mui/icons-material/SlowMotionVideoSharp";
 import SubjectSharpIcon from "@mui/icons-material/SubjectSharp";
@@ -16,14 +16,14 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
 }) => {
   const { pic, bvid } = data;
   return (
-    <section className='element-item'>
+    <section className={styles["video-section"]}>
       <Link
         target='_blank'
         href={`https://www.bilibili.com/video/${bvid}`}
         underline='none'
         color='inherit'
       >
-        <Image
+        <ImageBasic
           url={pic}
           {...Omit(
             data,
@@ -43,7 +43,7 @@ export const VideoRouterImageCard: FC<{ data: VideoRouterImageCardType }> = ({
           )}
         >
           <VideoData {...Pick(data, "view", "danmaku", "duration")} />
-        </Image>
+        </ImageBasic>
       </Link>
       <VideoInfo
         {...Pick(
@@ -70,11 +70,11 @@ const VideoData: FC<
       <div className={styles["video-data-left"]}>
         <span title='播放量'>
           <SlowMotionVideoSharpIcon fontSize='small' />
-          {view}
+          {getFixedNumber(view)}
         </span>
         <span title='弹幕数'>
           <SubjectSharpIcon fontSize='small' />
-          {danmaku}
+          {getFixedNumber(danmaku)}
         </span>
       </div>
       <span title='视频时长'>{getVideoTime(duration)}</span>
@@ -132,7 +132,6 @@ const VideoInfo: FC<
     </div>
   );
 };
-// 1-6 todo：写完视频页面展示瀑布图
 
 export const CoinIcon: FC<{
   height: number | string;
diff --git a/src/routers/video/video.module.less b/src/routers/video/video.module.less
index fe04f80..5e9d584 100644
--- a/src/routers/video/video.module.less
+++ b/src/routers/video/video.module.less
@@ -1,121 +1,140 @@
-.video-data {
-    transition: opacity .3s linear;
+.video-section {
+    height: 100%;
+    display: flex;
+    flex-flow: column nowrap;
+    // justify-content: space-between;
 
-    *:hover+& {
-        opacity: 0;
-    }
+    .video-data {
+        transition: opacity .3s linear;
 
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    box-sizing: border-box;
-    padding: 16px 8px 6px;
-    border-bottom-left-radius: 8px;
-    border-bottom-right-radius: 8px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    color: #fff;
-    font-size: 13px;
-    font-weight: 400;
-    background-image: linear-gradient(180deg,
-        rgba(0, 0, 0, 0) 0%,
-        rgba(0, 0, 0, .8) 100%);
-
-    &-left {
-        flex: 1;
+        *:hover+& {
+            opacity: 0;
+        }
+
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 16px 8px 6px;
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
         display: flex;
+        justify-content: space-between;
         align-items: center;
-
-        &>span {
-            font-size: 13px;
+        color: #fff;
+        font-size: 13px;
+        font-weight: 400;
+        background-image: linear-gradient(180deg,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, .8) 100%);
+
+        &-left {
+            flex: 1;
             display: flex;
             align-items: center;
 
-        }
+            &>span {
+                font-size: 13px;
+                display: flex;
+                align-items: center;
 
-        &>span:not(:last-of-type) {
-            margin-right: 12px;
-        }
-    }
-}
+            }
 
-.video-info {
-    &>*:not(:first-child) {
-        margin-top: 5px;
+            &>span:not(:last-of-type) {
+                margin-right: 12px;
+            }
+        }
     }
 
-    &>p {
-        color: #18191c;
-        font-size: 15px;
-        cursor: pointer;
-        transition: color .2s linear;
+    .video-info {
 
-        &:hover,
-        &:active {
-            color: #00aeec;
+        &>*:not(:first-child) {
+            margin-top: 5px;
         }
 
-    }
-
-    .video-up {
-        display: flex;
-        align-items: stretch;
+        &>p {
+            color: #18191c;
+            font-size: 15px;
+            cursor: pointer;
+            transition: color .2s linear;
+            height: 40px;
+            overflow: hidden;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            text-overflow: ellipsis;
+            line-break: anywhere;
+            -webkit-line-clamp: 2;
+            word-wrap: break-all;
+
+            &:hover,
+            &:active {
+                color: #00aeec;
+            }
 
-        &>*:not(:first-child) {
-            margin-left: 5px;
+            &>a {
+                line-height: 1.25;
+            }
         }
 
-        &-desc {
-            font-size: 13px;
+        .video-up {
             display: flex;
-            flex-flow: column nowrap;
-            justify-content: space-between;
-            cursor: default;
+            align-items: stretch;
+
+            &>*:not(:first-child) {
+                margin-left: 5px;
+            }
 
-            &-data {
+            &-desc {
+                font-size: 13px;
                 display: flex;
-                flex-flow: row nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
+                flex-flow: column nowrap;
+                justify-content: space-between;
+                cursor: default;
 
-                &>span {
-                    white-space: nowrap;
+                &-data {
                     display: flex;
-                    align-items: center;
+                    flex-flow: row nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
 
-                    &:not(:first-of-type) {
-                        margin-left: 10px;
+                    &>span {
+                        white-space: nowrap;
+                        display: flex;
+                        align-items: center;
+
+                        &:not(:first-of-type) {
+                            margin-left: 10px;
+                        }
                     }
                 }
-            }
 
 
-            a {
+                a {
 
-                color: rgb(148, 153, 160);
-                cursor: pointer;
-                transition: color .2s linear;
+                    color: rgb(148, 153, 160);
+                    cursor: pointer;
+                    transition: color .2s linear;
 
-                &:hover,
-                &:active {
-                    color: #00aeec;
-                }
+                    &:hover,
+                    &:active {
+                        color: #00aeec;
+                    }
 
-                &>span {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    word-break: break-all;
+                    &>span {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        word-break: break-all;
 
-                    &:not(:last-of-type):after {
-                        content: '·';
-                        margin: 0 4px;
-                    }
+                        &:not(:last-of-type):after {
+                            content: '·';
+                            margin: 0 4px;
+                        }
 
+                    }
                 }
             }
-        }
 
+        }
     }
 }
\ No newline at end of file
diff --git a/src/utils/fetch/index.ts b/src/utils/fetch/index.ts
index 299f09c..0808f11 100644
--- a/src/utils/fetch/index.ts
+++ b/src/utils/fetch/index.ts
@@ -1,6 +1,3 @@
-/**
- * TODO:使用真实数据
- */
 import videoJson from "./video.json";
 
 /**
@@ -15,11 +12,11 @@ export function fetchVideos(
   params: IFetchVideoParams
 ): Promise<RFetchVideoRes> {
   return Promise.resolve(videoJson);
-  // return fetch("/v1/video-interface/advanced-search?order=pubdate&page=1", {
-  //   method: "GET",
-  //   headers: {
-  //     "ocp-Apim-Subscription-Key": "3cc4284fbb864965a7a9ad0f28af8496",
-  //     origin: "https://portal.api.eoe.best",
-  //   },
-  // }).then((response) => response.json() as Promise<RFetchVideoRes>);
+  return fetch("/v1/video-interface/advanced-search?order=pubdate&page=1", {
+    method: "GET",
+    headers: {
+      "ocp-Apim-Subscription-Key": "3cc4284fbb864965a7a9ad0f28af8496",
+      origin: "https://portal.api.eoe.best",
+    },
+  }).then((response) => response.json() as Promise<RFetchVideoRes>);
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 562f7a6..6313b50 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -104,10 +104,13 @@ export function Omit<T extends object, P extends keyof T>(
   originObj: T,
   ...noUseAttr: P[]
 ): Omit<T, P> {
-  return noUseAttr.reduce((pre, cur) => {
-    delete pre[cur];
-    return pre;
-  }, deepClone(originObj));
+  return noUseAttr.reduce(
+    (pre, cur) => {
+      delete pre[cur];
+      return pre;
+    },
+    { ...originObj }
+  );
 }
 
 /**
@@ -117,6 +120,7 @@ export function deepClone(obj: any, hash = new WeakMap()) {
   if (obj === null) return obj; // 如果是null或者undefined我就不进行拷贝操作
   if (obj instanceof Date) return new Date(obj);
   if (obj instanceof RegExp) return new RegExp(obj);
+  if (obj instanceof Function) return obj;
   // 可能是对象或者普通的值  如果是函数的话是不需要深拷贝
   if (typeof obj !== "object") return obj;
   // 是对象的话就要进行深拷贝