tencent.jquery.pix.component 1.0.83 → 1.0.85

package/components/waterfall/waterfall.prompt

@@ -0,0 +1,81 @@
+flowchart TD
+    A["new Waterfall(options)"] --> B["init()"]
+
+    subgraph INIT["初始化流程"]
+        B --> B1["合并默认配置 DEFAULTS"]
+        B1 --> B2["计算列宽 columnWidth\n= (allWidth - gap×(cols-1)) / cols"]
+        B2 --> B3["创建列结构 columnItems[]\n每列: {left, bottom, width, children}"]
+        B3 --> B4["初始化数据ID映射 dataIdMap\n为每条 data 分配 dataId"]
+        B4 --> B5["渲染容器 HTML\n.waterfall-list-scroll\n  └─ .waterfall-list-viewport"]
+        B5 --> B6{"有 createLoading?"}
+        B6 -- 是 --> B7["创建 $loadingNode\n追加到 viewport"]
+        B6 -- 否 --> B8
+        B7 --> B8["绑定 scroll 事件\n节流 → requestAnimationFrame"]
+        B8 --> B9["首次调用 updateVisibleItems()"]
+    end
+
+    subgraph SCROLL["滚动触发"]
+        B9 --> C["updateVisibleItems(force=false)"]
+        C --> C1["计算可视区域\nstartTop / endTop"]
+        C1 --> C2["updateCardsInView({start, end, force})"]
+    end
+
+    subgraph CARDS_IN_VIEW["可视区域更新"]
+        C2 --> D1{"minHeight < endBuffer?"}
+        D1 -- 是 --> D2["createCards({end})\n补建卡片直到高度足够"]
+        D1 -- 否 --> D3
+        D2 --> D3["遍历所有列的 children\n判断每个 row 是否在可视范围内"]
+        D3 --> D4{"shouldOccupySpace?\n特殊静态节点"}
+        D4 -- 是 --> D5["只更新位置\n不参与节点复用"]
+        D4 -- 否 --> D6{"row 在可视区域内?"}
+        D6 -- 否 --> D7["移出可视区\ntransform: translateY(-9999px)\n放入 nodePool"]
+        D6 -- 是 --> D8{"activeNodes 中有此节点\n且未被占用?"}
+        D8 -- 是 --> D9["直接复用\nforce时重新渲染"]
+        D8 -- 否 --> D10{"allReadyNodes 中有?"}
+        D10 -- 是 --> D11["复用 allReadyNodes 节点\n重新渲染 updateRenderUI"]
+        D10 -- 否 --> D12{"nodePool 有空闲节点?"}
+        D12 -- 是 --> D13["从 nodePool 取节点\n复用并更新内容"]
+        D12 -- 否 --> D14["appendCard()\n创建全新 DOM 节点"]
+        D9 & D11 & D13 & D14 --> D15["更新 transform 位置\n加入 newActiveNodes"]
+        D15 --> D16["activeNodes = newActiveNodes"]
+    end
+
+    subgraph CREATE_CARDS["创建卡片 createCards"]
+        D2 --> E1["找下一个未渲染的 dataId\n(renderedDataIds 中不存在)"]
+        E1 --> E2{"还有未渲染数据?"}
+        E2 -- 否 --> E3["setScrollHeight() 结束"]
+        E2 -- 是 --> E4["getMinHeightColumn()\n找最矮的列"]
+        E4 --> E5["计算 top/left 位置"]
+        E5 --> E6{"nodePool 有节点\n且非特殊节点?"}
+        E6 -- 是 --> E7["复用 nodePool 节点\nupdateRenderUI"]
+        E6 -- 否 --> E8["appendCard()\n新建 DOM + renderItem 渲染"]
+        E7 & E8 --> E9["更新 column.bottom\n记录 row 到 column.children\n更新 dataIdMap.layoutInfo"]
+        E9 --> E10{"minHeight < end\n且还有更多数据?"}
+        E10 -- 是 --> E1
+        E10 -- 否 --> E3
+    end
+
+    subgraph UPDATE_DATA["数据更新 updateData(newData)"]
+        F["updateData(newData)"] --> F1["getBatchCardNewHeights()\n批量获取所有已渲染卡片新高度"]
+        F1 --> F2["收集高度变化 heightChanges Map"]
+        F2 --> F3["累积差分算法\n更新每列 row.top / row.bottom"]
+        F3 --> F4["为新增数据创建 dataIdMap 映射"]
+        F4 --> F5["setScrollHeight()\nupdateVisibleItems(force=true)"]
+    end
+
+    subgraph UPDATE_CARD["单卡片更新 updateCard(data)"]
+        G["updateCard(data)"] --> G1["定位 dataId"]
+        G1 --> G2["getCardOldHeight(dataId)"]
+        G2 --> G3["getCardNewHeight(dataId)\n渲染到临时/复用节点\nrequestAnimationFrame 获取高度"]
+        G3 --> G4["applyHeightChange()\n更新同列后续所有 row.top/bottom\n更新 column.bottom"]
+        G4 --> G5["setScrollHeight()\nupdateVisibleItems(force=true)"]
+    end
+
+    subgraph LOADING["Loading 控制"]
+        H1["showLoading()"] --> H2["计算 loadingTop = maxHeight + rowGap\n移动 $loadingNode 到底部\nsetScrollHeight()"]
+        H3["hideLoading()"] --> H4["$loadingNode 移出可视区\nrequestAnimationFrame → setScrollHeight()"]
+    end
+
+    subgraph DESTROY["销毁 destroy()"]
+        I["destroy()"] --> I1["清空容器 HTML\n清空所有 Map/Set/数组\n重置所有状态"]
+    end