From 9215db839b7e1c4c7e5599077cc1c4d1592b4c1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E7=86=8A?= <2216104446@qq.com>
Date: Fri, 6 Oct 2023 21:46:16 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=B0=83=E8=AF=95=E7=80=91=E5=B8=83?=
 =?UTF-8?q?=E6=B5=81=E5=85=BC=E5=AE=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/home - \345\211\257\346\234\254.vue" |  53 ++
 src/pages/home/home copy.vue                  | 518 ++++++++++++++++++
 2 files changed, 571 insertions(+)
 create mode 100644 "src/pages/home/home - \345\211\257\346\234\254.vue"
 create mode 100644 src/pages/home/home copy.vue

diff --git "a/src/pages/home/home - \345\211\257\346\234\254.vue" "b/src/pages/home/home - \345\211\257\346\234\254.vue"
new file mode 100644
index 0000000..f944d6b
--- /dev/null
+++ "b/src/pages/home/home - \345\211\257\346\234\254.vue"	
@@ -0,0 +1,53 @@
+<template>
+	<view class="virtual-waterfall-container">
+		<!-- #ifndef MP-WEIXIN -->
+		<Suspense>
+			<!-- #endif -->
+		<fs-virtual-water-fall :request="req" :gap="15" :column="2" :request-size="30">
+			<template #item="{ item }">
+				<img class="test-item" :src="item.src" />
+			</template>
+		</fs-virtual-water-fall>
+		<!-- #ifndef MP-WEIXIN -->
+		</Suspense>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+import FsVirtualWaterFall from '@/components/waterfall/waterfall.vue';
+import type { FsVirtualWaterfallRequest } from '@/components/waterfall/type';
+
+const req: FsVirtualWaterfallRequest = async (page, pageSize) => {
+	// 请求，并传入分页参数
+	return new Promise((resolve, reject) => {
+		uni.request({
+			url: `https://www.vilipix.com/api/v1/picture/public?limit=${pageSize}&sort=hot&offset=${--page * pageSize}`,
+			success: (res) => {
+				const rep = res.data;
+				// 数据处理
+				const {
+					data: { rows, count },
+				} = rep;
+				const processedRows = rows.map((item: any) => ({
+					id: item.picture_id,
+					width: item.width,
+					height: item.height,
+					src: item.regular_url + '?x-oss-process=image/resize,w_240/format,jpg',
+				}));
+				resolve({
+					total: count,
+					list: processedRows,
+				});
+			},
+			fail: (error) => {
+				reject(error);
+			},
+		});
+	});
+};
+</script>
+
+<style scoped lang="scss">
+@import './home.scss';
+</style>
diff --git a/src/pages/home/home copy.vue b/src/pages/home/home copy.vue
new file mode 100644
index 0000000..b8cb696
--- /dev/null
+++ b/src/pages/home/home copy.vue	
@@ -0,0 +1,518 @@
+<template>
+	<view class="virtual-waterfall-container">
+		<!-- #ifndef MP-WEIXIN -->
+		<Suspense>
+			<!-- #endif -->
+		<fs-virtual-water-fall :request="req" :gap="15" :column="2" :request-size="30">
+			<template #item="{ item }">
+				<img class="test-item" :src="item.src" />
+			</template>
+		</fs-virtual-water-fall>
+		<!-- #ifndef MP-WEIXIN -->
+		</Suspense>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup lang="ts">
+import FsVirtualWaterFall from '@/components/waterfall/waterfall.vue';
+import type { FsVirtualWaterfallRequest } from '@/components/waterfall/type';
+
+const req: FsVirtualWaterfallRequest = async (page, pageSize) => {
+	const rep = [
+		{
+			code: 0,
+			data: {
+				count: 61912,
+				rows: [
+					{
+						picture_id: '62242914',
+						title: 'Night Elves',
+						width: 849,
+						height: 1500,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/08/11/56/62242914_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/08/11/56/62242914_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 43554,
+						comment_total: 6,
+						tags: 'オリジナル,原创,Niya,女の子,女孩子,妖精,fairy,ヘテロクロミア,heterochromia,ピンク髪ロング,long pink hair,オリジナル30000users入り,原创30000收藏,ミニスカ,迷你裙,魅惑の脚線美,诱惑的美腿曲线,星空ドレス,Starry Sky Dress',
+						created_at: '2021-05-08T03:53:53.000Z',
+					},
+					{
+						picture_id: '75726416',
+						title: '微笑',
+						width: 758,
+						height: 786,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/27/22/38/75726416_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/27/22/38/75726416_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 43416,
+						comment_total: 3,
+						tags: 'Fate,セイバー,Saber,アルトリア・ペンドラゴン,阿尔托利亚·潘德拉贡,Fate/staynight,紐タイ,string ribbon,セイバー(Fate/staynight),Saber (Fate/staynight),Fate50000users入り,Fate 50000收藏',
+						created_at: '2021-04-27T14:35:57.000Z',
+					},
+					{
+						picture_id: '48456097',
+						title: '啊!',
+						width: 627,
+						height: 885,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/08/15/10/14/48456097_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/08/15/10/14/48456097_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 43355,
+						comment_total: 1,
+						tags: '艦隊これくしょん,舰队collection,ヲ級,Wo-Class,敵艦隊のアイドル,idol of the enemy fleet,空母ヲ級,空母wo级,吸い込まれそうな瞳,迷人的眼睛,深海棲艦,深海栖舰,艦これ,舰C,ふつくしい,太美了,艦これ50000users入り,舰队收藏50000收藏',
+						created_at: '2021-08-16T01:58:39.000Z',
+					},
+					{
+						picture_id: '82987489',
+						title: '2020',
+						width: 1500,
+						height: 2354,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/29/09/22/82987489_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/29/09/22/82987489_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 43347,
+						comment_total: 0,
+						tags: 'FGO,メルトリリス,溶解莉莉丝,吸い込まれそうな瞳,迷人的眼睛,ハイウエストスカート,high-waisted skirt,吊りスカート,suspender skirt,Fate/GrandOrder,紐タイ,string ribbon,Fate/GO50000users入り,Fate/GO50000+ 收藏',
+						created_at: '2021-06-29T01:19:14.000Z',
+					},
+					{
+						picture_id: '60593260',
+						title: '马修酱',
+						width: 750,
+						height: 1200,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/40/60593260_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/40/60593260_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 43281,
+						comment_total: 0,
+						tags: 'Fate/GrandOrder,マシュ,玛修,黒タイツ,黑裤袜,ショートブーツ,short boots,マシュ・キリエライト,玛修·基列莱特,フォウ(Fate),芙芙（Fate）,けしからんふともも,arousing thighs,Fate/GO30000users入り,Fate/Grand Order 30000+ bookmarks,着衣巨乳,显性巨乳',
+						created_at: '2021-06-08T01:36:26.000Z',
+					},
+					{
+						picture_id: '83088255',
+						title: 'Grow',
+						width: 1035,
+						height: 1200,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2022/03/04/22/06/83088255_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2022/03/04/22/06/83088255_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 43266,
+						comment_total: 5,
+						tags: 'オリジナル,原创,女の子,女孩子,制服,uniform,セーラー服,水手服,赤面,脸红,陰影,shade,黒髪ロング,黑长直,身長差,height difference,オリジナル50000users入り,原创50000收藏',
+						created_at: '2022-03-04T14:05:23.000Z',
+					},
+					{
+						picture_id: '56402703',
+						title: 'Color Girl',
+						width: 1195,
+						height: 1600,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/18/56402703_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/18/56402703_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 43129,
+						comment_total: 0,
+						tags: 'オリジナル,原创,CLIPSTUDIOPAINT,仕事絵,商业绘图,女の子,女孩子,マフラー,围巾,ストラップシューズ,玛丽珍鞋,猫と女の子,cat and girl,サスペンダー,suspenders,オリジナル30000users入り,原创30000收藏',
+						created_at: '2021-06-08T01:15:28.000Z',
+					},
+					{
+						picture_id: '68198008',
+						title: '豆腐薄饼',
+						width: 900,
+						height: 1440,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/10/68198008_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/10/68198008_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42932,
+						comment_total: 2,
+						tags: 'ff14,パンケーキ,pancake,女の子,女孩子,ミコッテ,猫魅族,食事,meal,獣耳,兽耳,デタッチドスリーブ,detached sleeves,いっぱい食べる君が好き,I like it when you eat a lot,食べ物,食物,FF50000users入り,FF 50000收藏',
+						created_at: '2021-05-16T03:07:52.000Z',
+					},
+					{
+						picture_id: '83314745',
+						title: '爱丽丝 &middot; 辛塞西斯 &middot; 萨蒂',
+						width: 1240,
+						height: 2089,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/31/83314745_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/31/83314745_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42886,
+						comment_total: 7,
+						tags: 'SAO,アリス・シンセシス・サーティ,爱丽丝·滋贝鲁库,ソードアート・オンライン,刀剑神域,なにこれ素敵,卧槽美哭,金木犀の剣,金髪碧眼,金发碧眼,マント,cloak,三つ編み,麻花辫,SAO50000users入り',
+						created_at: '2021-06-08T01:28:06.000Z',
+					},
+					{
+						picture_id: '62356764',
+						title: '无题',
+						width: 600,
+						height: 836,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/07/21/21/33/62356764_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/07/21/21/33/62356764_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42884,
+						comment_total: 4,
+						tags: 'オリジナル,原创,COMITIA120,青リボン,ウィンク,抛媚眼,おへそ,肚脐,ツインテール,双马尾,オリジナル30000users入り,原创30000收藏',
+						created_at: '2021-07-22T13:29:09.000Z',
+					},
+					{
+						picture_id: '76868418',
+						title: '用丝带装饰',
+						width: 715,
+						height: 1033,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/08/23/10/58/76868418_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/08/23/10/58/76868418_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42861,
+						comment_total: 3,
+						tags: 'オリジナル,原创,女の子,女孩子,リボン,蝴蝶结,鏡越し,隔着镜子,銀髪ロング,银色长发,絵中絵,画中画,オリジナル50000users入り,原创50000收藏',
+						created_at: '2021-08-24T02:56:43.000Z',
+					},
+					{
+						picture_id: '59995481',
+						title: '许愿的瓶子',
+						width: 1000,
+						height: 1428,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/08/11/56/59995481_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/08/11/56/59995481_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42686,
+						comment_total: 1,
+						tags: 'オリジナル,原创,Niya,ガラスの中,玻璃之中,美しい,美,瓶詰め,bottled,水中,水下,小女子,小型女子,ピンク髪ロング,long pink hair,オリジナル30000users入り,原创30000收藏',
+						created_at: '2021-05-08T03:53:52.000Z',
+					},
+					{
+						picture_id: '71982822',
+						title: '★',
+						width: 566,
+						height: 800,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/27/20/31/71982822_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/27/20/31/71982822_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42621,
+						comment_total: 1,
+						tags: 'ペルソナ5,女神异闻录5,新島真,新岛真,高巻杏,高卷杏,奥村春,Haru Okumura,モルガナ,摩尔加纳,心あれば現れる者たち,佐倉双葉,佐仓双叶,心の怪盗団,Phantom Thieves of Hearts,ペルソナ50000users入り',
+						created_at: '2021-04-27T12:29:25.000Z',
+					},
+					{
+						picture_id: '69924881',
+						title: 'Hello Summer!',
+						width: 1490,
+						height: 1025,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2022/07/06/10/69924881_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/original/2022/07/06/10/69924881_p0.png',
+						page_total: 2,
+						status: 5,
+						type: 0,
+						like_total: 42462,
+						comment_total: 0,
+						tags: 'オリジナル,原创,女の子,女孩子,水着,泳装,ロングヘアー,长发,黄色ビキニ,黄色比基尼,ハイビスカス,扶桑花,パレオ,pareo,花吹雪,falling petals,乱れ髪,披散头发,オリジナル50000users入り,原创50000收藏',
+						created_at: '2022-07-09T02:44:26.000Z',
+					},
+					{
+						picture_id: '72414258',
+						title: '☆ 2019 ☆',
+						width: 1000,
+						height: 1412,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/10/72414258_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/10/72414258_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42411,
+						comment_total: 0,
+						tags: 'オリジナル,原创,ウインク,wink,緑髪,green hair,振袖,furisode,着物,和服,おみくじ,緑髪ロング,long green hair,看板娘,showgirl,ウィンク,抛媚眼,オリジナル50000users入り,原创50000收藏',
+						created_at: '2021-05-16T03:07:55.000Z',
+					},
+					{
+						picture_id: '56213875',
+						title: '女仆泰酱',
+						width: 1000,
+						height: 1333,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/11/56213875_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/16/11/11/56213875_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42401,
+						comment_total: 1,
+						tags: 'ff14,メイド,女仆,ミコッテ,猫魅族,シルバートレイ,silver tray,ホワイトブリム,maid headdress,メイドアタイヤ,メイド服,女仆装,猫耳,cat ears,FF30000users入り,FF 30000收藏',
+						created_at: '2021-05-16T03:07:46.000Z',
+					},
+					{
+						picture_id: '51404802',
+						title: '手风琴',
+						width: 1578,
+						height: 975,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2022/08/25/20/51404802_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/original/2022/08/25/20/51404802_p0.png',
+						page_total: 1,
+						status: 5,
+						type: 0,
+						like_total: 42397,
+						comment_total: 0,
+						tags: '女の子,女孩子,オリジナル,原创,廃墟,废墟,アコーディオン,accordion,風,风,オリジナル30000users入り,原创30000收藏',
+						created_at: '2022-08-29T11:58:40.000Z',
+					},
+					{
+						picture_id: '81332838',
+						title: '春天的亡灵',
+						width: 2000,
+						height: 2810,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/23/12/39/81332838_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/05/23/12/39/81332838_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42223,
+						comment_total: 4,
+						tags: '女の子,女孩子,少女,young girl,セーラー服,水手服,桜,樱,菊,オリジナル,原创,制服,uniform,金髪ロング,金色长发,オリジナル50000users入り,原创50000收藏',
+						created_at: '2021-05-23T04:38:07.000Z',
+					},
+					{
+						picture_id: '72471572',
+						title: '秦心',
+						width: 1488,
+						height: 1976,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/30/10/01/72471572_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/30/10/01/72471572_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42111,
+						comment_total: 1,
+						tags: '秦こころ,秦心,東方Project,东方Project,東方,东方,東方Project10000users入り,东方Project 10000收藏',
+						created_at: '2021-07-01T01:58:13.000Z',
+					},
+					{
+						picture_id: '76852980',
+						title: '初音未来交响乐2019',
+						width: 1200,
+						height: 850,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/14/14/35/76852980_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/14/14/35/76852980_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42092,
+						comment_total: 1,
+						tags: 'VOCALOID,初音ミクシンフォニー,Hatsune Miku symphony,初音ミク,初音未来,鏡音リン,鏡音鈴,鏡音レン,镜音连,巡音ルカ,巡音流歌,MEIKO,KAITO,クリプトン6兄弟,C社6只,VOCALOID50000users入り,Vocaloid 50000+ Bookmarks',
+						created_at: '2021-04-14T06:26:50.000Z',
+					},
+					{
+						picture_id: '72842139',
+						title: '光亮',
+						width: 1039,
+						height: 1469,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/14/14/35/72842139_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/14/14/35/72842139_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42088,
+						comment_total: 3,
+						tags: '初音ミク,初音未来,VOCALOID,初音ミクシンフォニー,Hatsune Miku symphony,クリック推奨,建议点击,ふつくしい,太美了,ハイセンス,品味优雅,ミクさんマジ天使,Miku must be an angel,これはいい初音,这个初音真美好,VOCALOID50000users入り,Vocaloid 50000+ Bookmarks',
+						created_at: '2021-04-14T06:26:49.000Z',
+					},
+					{
+						picture_id: '64886310',
+						title: '10022;',
+						width: 675,
+						height: 983,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2022/01/19/10/42/64886310_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2022/01/19/10/42/64886310_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42056,
+						comment_total: 0,
+						tags: 'オリジナル,原创,ケモ耳,兽耳,女の子,女孩子,リブ生地,粗条纹,セーター,sweater,エンペラ,ガーターベルト,吊袜带,オリジナル30000users入り,原创30000收藏',
+						created_at: '2022-01-20T02:40:14.000Z',
+					},
+					{
+						picture_id: '81976038',
+						title: '樱花',
+						width: 1080,
+						height: 1920,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/14/14/33/81976038_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/14/14/33/81976038_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 42015,
+						comment_total: 4,
+						tags: '桜ミク,樱未来,初音ミク,初音未来,VOCALOID,ミクさんマジ女神,ミクさんと花,初音未来与花,桜,樱,VOCALOID30000users入り,VOCALOID 30000收藏,ミクさんマジ天使,Miku must be an angel,これはいい初音,这个初音真美好,ふつくしい,太美了',
+						created_at: '2021-04-14T06:26:51.000Z',
+					},
+					{
+						picture_id: '62579289',
+						title: 'COMITIA120',
+						width: 1000,
+						height: 715,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/07/21/21/33/62579289_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/07/21/21/33/62579289_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 41986,
+						comment_total: 1,
+						tags: 'オリジナル,原创,着物,和服,花柄,floral pattern,サイドテール,侧马尾,女の子,女孩子,オリジナル30000users入り,原创30000收藏',
+						created_at: '2021-07-22T13:29:09.000Z',
+					},
+					{
+						picture_id: '62843266',
+						title: '烟',
+						width: 2000,
+						height: 1065,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2022/08/31/14/62843266_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/original/2022/08/31/14/62843266_p0.jpg',
+						page_total: 1,
+						status: 5,
+						type: 0,
+						like_total: 41950,
+						comment_total: 1,
+						tags: 'ghostblade,泣きぼくろ,泪痣,美しい,美,wlop,Incredible,オリジナル30000users入り,原创30000收藏,海琴烟',
+						created_at: '2022-09-01T06:10:32.000Z',
+					},
+					{
+						picture_id: '67820244',
+						title: '&middot; &middot; &middot; &middot; &middot; &middot; &middot; &middot; &middot; &middot;',
+						width: 1500,
+						height: 2625,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/03/11/35/67820244_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/03/11/35/67820244_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 41820,
+						comment_total: 1,
+						tags: '原创,original works,オリジナル,拘束,束缚,水中,水下,茶髪ロング,long brown hair,ロングスカート,长裙,ベアトップドレス,bare top dress,女の子,女孩子,クラゲ,水母,オリジナル30000users入り,原创30000收藏',
+						created_at: '2021-06-03T03:32:18.000Z',
+					},
+					{
+						picture_id: '79059955',
+						title: '2020 JAPANTOUR',
+						width: 1202,
+						height: 1700,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/50/79059955_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/06/08/09/50/79059955_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 41729,
+						comment_total: 6,
+						tags: 'オリジナル,原创,ミニスカ,迷你裙,セーラー服,水手服,女の子,女孩子,女子高生,女高中生,オリジナル50000users入り,原创50000收藏',
+						created_at: '2021-06-08T01:47:06.000Z',
+					},
+					{
+						picture_id: '67013745',
+						title: 'Byebye luomani',
+						width: 1550,
+						height: 1096,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/27/20/48/67013745_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/04/27/20/48/67013745_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 41660,
+						comment_total: 0,
+						tags: 'fgo,Fate/GrandOrder,クリック推奨,建议点击,ロマニ・アーキマン,罗玛尼·阿其曼,なにこれすごい,卧槽好厉害,愛と希望の物語,素晴らしすぎる,太赞了,Fate/GO30000users入り,Fate/Grand Order 30000+ bookmarks,野生の公式,野生的官方,冠位時間神殿ソロモン,The Grand Temple of Time: Solomon',
+						created_at: '2021-04-27T12:46:57.000Z',
+					},
+					{
+						picture_id: '61524931',
+						title: '脚底',
+						width: 1000,
+						height: 701,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2021/10/11/11/58/61524931_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/regular/2021/10/11/11/58/61524931_p0_master1200.jpg',
+						page_total: 0,
+						status: 5,
+						type: 0,
+						like_total: 41622,
+						comment_total: 1,
+						tags: 'オリジナル,原创,足裏,脚底,裸足裏,裸足脚底,女の子,女孩子,尻神様,尻神样,魅惑のふともも,魅惑的大腿,裸足,赤脚,オリジナル30000users入り,原创30000收藏,四つん這い,on all fours',
+						created_at: '2021-10-25T03:56:31.000Z',
+					},
+					{
+						picture_id: '65388865',
+						title: '✬',
+						width: 833,
+						height: 1000,
+						regular_url: 'http://img9.vilipix.com/picture/pages/regular/2022/08/24/20/65388865_p0_master1200.jpg',
+						original_url: 'http://img9.vilipix.com/picture/pages/original/2022/08/24/20/65388865_p0.jpg',
+						page_total: 1,
+						status: 5,
+						type: 0,
+						like_total: 41617,
+						comment_total: 3,
+						tags: 'オリジナル,原创,神撃のバハムート,巴哈姆特之怒,ミスティアストロジスト,星,star,銀髪碧眼,银发碧眼,シャドウバース,影之诗,天球儀,celestial globe,星空ドレス,Starry Sky Dress,シャドウバースご本人,神撃のバハムート50000users入り',
+						created_at: '2022-08-24T12:36:52.000Z',
+					},
+				],
+			},
+			message: 'ok',
+		},
+	];
+
+	const processedRows = rep[0].data.rows.map((item: any) => ({
+		id: item.picture_id,
+		width: item.width,
+		height: item.height,
+		src: item.regular_url + '?x-oss-process=image/resize,w_240/format,jpg',
+	}));
+	return {
+		total: rep[0].data.count,
+		list: processedRows,
+	};
+};
+</script>
+
+<style scoped lang="scss">
+.virtual-waterfall-container {
+	width: 100%;
+	height: 100%;
+}
+.test-item {
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+	animation: identifier 0.25s; // 添加动画，使其出现时更加丝滑
+}
+@keyframes identifier {
+	from {
+		opacity: 0;
+		transform: translateY(200px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+</style>
-- 
Gitee


From 10c21ebd02e616534e4eaf359de4e187a8e91301 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E7=86=8A?= <2216104446@qq.com>
Date: Sat, 7 Oct 2023 00:28:59 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=9D=A1=E4=BB=B6?=
 =?UTF-8?q?=E7=BC=96=E8=AF=91=E5=A2=9E=E5=8A=A0=E7=80=91=E5=B8=83=E6=B5=81?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E5=85=BC=E5=AE=B9=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/waterfall/waterfall.vue | 425 +++++++++++++------------
 1 file changed, 215 insertions(+), 210 deletions(-)

diff --git a/src/components/waterfall/waterfall.vue b/src/components/waterfall/waterfall.vue
index 2878ac8..ca745af 100644
--- a/src/components/waterfall/waterfall.vue
+++ b/src/components/waterfall/waterfall.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="fs-virtual-waterfall-container" :style="{ height: screenHeight }">
-		<div class="fs-virtual-waterfall-content" id="content" ref="contentRef" @scroll='handleScroll'>
+	<div class="fs-virtual-waterfall-container" :style="{ height: screenHeight +'px' }">
+		<div class="fs-virtual-waterfall-content" id="content" ref="contentRef" @scroll="handleScroll">
 			<div class="fs-virtual-waterfall-list" :style="contentStyle">
-				<div class="fs-virtual-waterfall-item" v-for="{ item, style } in renderList" :key="item.id"
-					:style="style">
+				222
+				<div class="fs-virtual-waterfall-item" v-for="{ item, style } in renderList" :key="item.id" :style="style">
 					<slot name="item" :item="item"></slot>
 				</div>
 			</div>
@@ -12,225 +12,230 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, computed, reactive, onMounted, type CSSProperties, defineProps } from 'vue';
-	import type { IColumnQueue, IDataItem, IItemRect, IRenderItem, FsVirtualWaterfallRequest } from './type';
-	import { debounce, rafThrottle } from './tool';
-
-	// 屏幕高度
-	const screenHeight = (await uni.getSystemInfo()).windowHeight + 'px';
-	interface IVirtualWaterFallProps {
-		column ?: number;
-		columnItemCount ?: number;
-		requestSize ?: number;
-		gap ?: number;
-		request ?: FsVirtualWaterfallRequest;
-	}
-	const props = withDefaults(defineProps<IVirtualWaterFallProps>(), {
-		request: async () => ({ list: [], total: 0 }),
-		gap: 20,
-		column: 4,
-		columnItemCount: 6,
-		requestSize: 0,
+import { ref, computed, reactive, onMounted, type CSSProperties } from 'vue';
+import type { IColumnQueue, IDataItem, IItemRect, IRenderItem, FsVirtualWaterfallRequest } from './type';
+import { debounce, rafThrottle } from './tool';
+
+
+interface IVirtualWaterFallProps {
+	column?: number;
+	columnItemCount?: number;
+	requestSize?: number;
+	gap?: number;
+	request?: FsVirtualWaterfallRequest;
+}
+const props = withDefaults(defineProps<IVirtualWaterFallProps>(), {
+	request: async () => ({ list: [], total: 0 }),
+	gap: 20,
+	column: 4,
+	columnItemCount: 6,
+	requestSize: 0,
+});
+// 屏幕高度
+const screenHeight = (await uni.getSystemInfo()).windowHeight;
+const screenWidth = (await uni.getSystemInfo()).windowWidth;
+const emit = defineEmits<{
+	finishGetList: [];
+}>();
+
+const contentRef = ref<HTMLDivElement>();
+
+const dataState = reactive({
+	loading: false,
+	isFinish: false,
+	currentPage: 1,
+	total: 0,
+	list: [] as IDataItem[],
+});
+const columnState = reactive({
+	queue: Array(props.column)
+		.fill(0)
+		.map<IColumnQueue>(() => ({ list: [], height: 0 })),
+	len: 0,
+});
+const scrollState = reactive({
+	viewWidth: 0,
+	viewHeight: 0,
+	start: 0,
+	get end() {
+		return this.start + this.viewHeight;
+	},
+});
+
+const contentStyle = computed(() => ({ height: `${computedHeight.value.maxHeight}px` }) as CSSProperties);
+const columnList = computed(() => columnState.queue.reduce<IRenderItem[]>((pre, { list }) => pre.concat(list), []));
+const renderList = computed(() => columnList.value.filter((i) => i.h + i.y > scrollState.start && i.y < scrollState.end));
+console.log(renderList,scrollState)
+const computedHeight = computed(() => {
+	let minIndex = 0,
+		maxIndex = 0,
+		minHeight = Infinity,
+		maxHeight = -Infinity;
+	columnState.queue.forEach(({ height }, index) => {
+		if (height < minHeight) {
+			minHeight = height;
+			minIndex = index;
+		}
+		if (height > maxHeight) {
+			maxHeight = height;
+			maxIndex = index;
+		}
 	});
 
-	const emit = defineEmits<{
-		finishGetList : [];
-	}>();
-
-	const contentRef = ref<HTMLDivElement>();
-
-	const dataState = reactive({
-		loading: false,
-		isFinish: false,
-		currentPage: 1,
-		total: 0,
-		list: [] as IDataItem[],
-	});
-	const columnState = reactive({
-		queue: Array(props.column)
-			.fill(0)
-			.map<IColumnQueue>(() => ({ list: [], height: 0 })),
-		len: 0,
-	});
-	const scrollState = reactive({
-		viewWidth: 0,
-		viewHeight: 0,
-		start: 0,
-		get end() {
-			return this.start + this.viewHeight;
+	return {
+		minIndex,
+		maxIndex,
+		minHeight,
+		maxHeight,
+	};
+});
+
+const itemSizeInfo = computed(() =>
+	dataState.list.reduce<Map<IDataItem['id'], IItemRect>>((pre, current) => {
+		const itemWidth = Math.floor((scrollState.viewWidth - (props.column - 1) * props.gap) / props.column);
+		pre.set(current.id, {
+			width: itemWidth,
+			height: Math.floor((itemWidth * current.height) / current.width),
+		});
+		return pre;
+	}, new Map())
+);
+
+const requestSize = computed(() => props.requestSize || props.column * props.columnItemCount);
+
+const hasMoreData = computed(() => columnState.len < dataState.list.length);
+
+const loadDataList = async () => {
+	if (dataState.isFinish) return;
+	dataState.loading = true;
+	const { list, total } = await props.request(dataState.currentPage++, requestSize.value);
+	if (!list.length) {
+		dataState.isFinish = true;
+		emit('finishGetList');
+		return;
+	}
+	dataState.list.push(...Object.freeze(list));
+	dataState.total = total;
+	dataState.loading = false;
+};
+
+const addInQueue = (size = props.column) => {
+	for (let i = 0; i < size; i++) {
+		if (!hasMoreData.value) return;
+		const minIndex = computedHeight.value.minIndex;
+		const currentColumn = columnState.queue[minIndex];
+		const before = currentColumn.list[currentColumn.list.length - 1] || null;
+		const dataItem = dataState.list[columnState.len];
+		const item = generatorItem(dataItem, before, minIndex);
+		currentColumn.list.push(item);
+		currentColumn.height += item.h;
+		columnState.len++;
+	}
+};
+
+const generatorItem = (item: IDataItem, before: IRenderItem | null, index: number): IRenderItem => {
+	const rect = itemSizeInfo.value.get(item.id);
+	const width = rect?.width || 0;
+	const height = rect?.height || 0;
+	let y = 0;
+	if (before) y = before.y + before.h + props.gap;
+
+	return Object.freeze({
+		item,
+		y,
+		h: height,
+		style: {
+			width: `${width}px`,
+			height: `${height}px`,
+			transform: `translate3d(${index === 0 ? 0 : (width + props.gap) * index}px, ${y}px, 0)`,
 		},
 	});
-	const contentStyle = computed(() => ({ height: `${computedHeight.value.maxHeight}px` }) as CSSProperties);
-	const columnList = computed(() => columnState.queue.reduce<IRenderItem[]>((pre, { list }) => pre.concat(list), []));
-	const renderList = computed(() =>
-		columnList.value.filter(
-			(i) => i.h + i.y > scrollState.start && i.y < scrollState.end
-		)
-	);
-	const computedHeight = computed(() => {
-		let minIndex = 0,
-			maxIndex = 0,
-			minHeight = Infinity,
-			maxHeight = -Infinity;
-		columnState.queue.forEach(({ height }, index) => {
-			if (height < minHeight) {
-				minHeight = height;
-				minIndex = index;
-			}
-			if (height > maxHeight) {
-				maxHeight = height;
-				maxIndex = index;
-			}
-		});
-
+};
+
+const reComputedQueue = () => {
+	columnState.queue = columnState.queue.map((q, index) => {
+		let height = 0;
+		const list = q.list.reduce<IRenderItem[]>((total, { item }, i) => {
+			const before = total[i - 1] || null;
+			const result = generatorItem(item, before, index);
+			height += result.h;
+			total.push(result);
+			return total;
+		}, []);
 		return {
-			minIndex,
-			maxIndex,
-			minHeight,
-			maxHeight,
+			height,
+			list,
 		};
 	});
-
-	const itemSizeInfo = computed(() =>
-		dataState.list.reduce<Map<IDataItem['id'], IItemRect>>((pre, current) => {
-			const itemWidth = Math.floor((scrollState.viewWidth - (props.column - 1) * props.gap) / props.column);
-			pre.set(current.id, {
-				width: itemWidth,
-				height: Math.floor((itemWidth * current.height) / current.width),
-			});
-			return pre;
-		}, new Map())
-	);
-
-	const requestSize = computed(() => props.requestSize || props.column * props.columnItemCount);
-
-	const hasMoreData = computed(() => columnState.len < dataState.list.length);
-
-	const loadDataList = async () => {
-		if (dataState.isFinish) return;
-		dataState.loading = true;
-		const { list, total } = await props.request(dataState.currentPage++, requestSize.value);
-		if (!list.length) {
-			dataState.isFinish = true;
-			emit('finishGetList');
-			return;
-		}
-		dataState.list.push(...Object.freeze(list));
-		dataState.total = total;
-		dataState.loading = false;
-	};
-
-	const addInQueue = (size = props.column) => {
-		for (let i = 0; i < size; i++) {
-			if (!hasMoreData.value) return;
-			const minIndex = computedHeight.value.minIndex;
-			const currentColumn = columnState.queue[minIndex];
-			const before = currentColumn.list[currentColumn.list.length - 1] || null;
-			const dataItem = dataState.list[columnState.len];
-			const item = generatorItem(dataItem, before, minIndex);
-			currentColumn.list.push(item);
-			currentColumn.height += item.h;
-			columnState.len++;
-		}
-	};
-
-	const generatorItem = (item : IDataItem, before : IRenderItem | null, index : number) : IRenderItem => {
-		const rect = itemSizeInfo.value.get(item.id);
-		const width = rect?.width || 0;
-		const height = rect?.height || 0;
-		let y = 0;
-		if (before) y = before.y + before.h + props.gap;
-
-		return Object.freeze({
-			item,
-			y,
-			h: height,
-			style: {
-				width: `${width}px`,
-				height: `${height}px`,
-				transform: `translate3d(${index === 0 ? 0 : (width + props.gap) * index}px, ${y}px, 0)`,
-			},
-		});
-	};
-
-	const reComputedQueue = () => {
-		columnState.queue = columnState.queue.map((q, index) => {
-			let height = 0;
-			const list = q.list.reduce<IRenderItem[]>((total, { item }, i) => {
-				const before = total[i - 1] || null;
-				const result = generatorItem(item, before, index);
-				height += result.h;
-				total.push(result);
-				return total;
-			}, []);
-			return {
-				height,
-				list,
-			};
-		});
-	};
-
-	const handleScroll = rafThrottle(() => {
-		const { scrollTop, clientHeight } = contentRef.value!;
-		scrollState.start = scrollTop;
-		if (!dataState.loading && !hasMoreData.value) {
-			loadDataList().then(() => {
-				addInQueue();
-			});
-			return;
-		}
-		if (scrollTop + clientHeight > computedHeight.value.minHeight) addInQueue();
-	});
-
-	const handleResize = debounce(() => {
-		initScrollState();
-		reComputedQueue();
-	}, 300);
-
-	const initScrollState = () => {
-		scrollState.viewWidth = contentRef.value?.clientWidth || 0;
-		scrollState.viewHeight = contentRef.value?.clientHeight || 0;
-		scrollState.start = contentRef.value?.scrollTop || 0;
-	};
-
-	const init = async () => {
-		initScrollState();
-		await loadDataList();
-		addInQueue(requestSize.value);
-		uni.onWindowResize(() => {
-			handleResize()
+};
+
+const handleScroll = rafThrottle(() => {
+	const { scrollTop, clientHeight } = contentRef.value!;
+	scrollState.start = scrollTop;
+	if (!dataState.loading && !hasMoreData.value) {
+		loadDataList().then(() => {
+			addInQueue();
 		});
-	};
-
-	onMounted(async () => {
-		await init();
+		return;
+	}
+	if (scrollTop + clientHeight > computedHeight.value.minHeight) addInQueue();
+});
+
+const handleResize = debounce(() => {
+	initScrollState();
+	reComputedQueue();
+}, 300);
+
+const initScrollState = () => {
+	// #ifdef WEB
+	scrollState.viewWidth = contentRef.value?.clientWidth || 0;
+	scrollState.viewHeight = contentRef.value?.clientHeight || 0;
+	scrollState.start = contentRef.value?.scrollTop || 0;
+	// #endif
+	// #ifndef WEB
+	scrollState.viewWidth =  screenWidth;
+	scrollState.viewHeight =  screenHeight;
+	scrollState.start = 0;
+	// #endif
+};
+
+const init = async () => {
+	initScrollState()
+	await loadDataList();
+	addInQueue(requestSize.value);
+	uni.onWindowResize(() => {
+		handleResize();
 	});
+};
+onMounted( () => {
+	 init();
+});
 </script>
 
 <style scoped lang="scss">
-	.fs-virtual-waterfall {
-		&-container {
-			width: 100%;
-			height: 100%;
-		}
+.fs-virtual-waterfall {
+	&-container {
+		width: 100%;
+		height: 100%;
+	}
 
-		&-content {
-			width: 100%;
-			height: 100%;
-			overflow-y: scroll;
-		}
+	&-content {
+		width: 100%;
+		height: 100%;
+		overflow-y: scroll;
+	}
 
-		&-list {
-			position: relative;
-			width: 100%;
-		}
+	&-list {
+		position: relative;
+		width: 100%;
+	}
 
-		&-item {
-			position: absolute;
-			top: 0;
-			left: 0;
-			transition: all 0.3s;
-			box-sizing: border-box;
-		}
+	&-item {
+		position: absolute;
+		top: 0;
+		left: 0;
+		transition: all 0.3s;
+		box-sizing: border-box;
 	}
-</style>
\ No newline at end of file
+}
+</style>
-- 
Gitee