tencent.jquery.pix.component 1.0.62 → 1.0.63-beta.2

package/components/waterfall/waterfall.js

@@ -19,10 +19,11 @@ const DEFAULTS = {
     // 传入 $node, data, index
     updateItem: null, // 元素更新时的回调函数
     onscroll: null,   // 滚动事件回调函数
+    shouldOccupySpace: null // 是否是静态数据的回调函数，静态数据能够占用元素
 };
 
 export function Waterfall(optionsInput = {}) {
-    $ = getEnv();
+    $ = getEnv().$;
 
     this.options = Object.assign({}, DEFAULTS, optionsInput);
     const options = this.options;
@@ -30,6 +31,12 @@ export function Waterfall(optionsInput = {}) {
     // 标记是否有更新元素用的回调函数
     this.hasUpdateItem = options.updateItem && (options.updateItem.constructor === Function) ? true : false;
 
+    // 新方案：数据ID映射机制
+    this.dataIdMap = new Map(); // 数据ID -> 布局信息映射
+    this.nextDataId = 0; // 下一个数据ID
+    this.renderedDataIds = new Set(); // 已渲染的数据ID集合
+
+
     // 间隔字符串转数字
     if (options.columnGap.constructor === String) {
         // 如果是rem单位，则需要计算
@@ -85,13 +92,29 @@ export function Waterfall(optionsInput = {}) {
         this.columnItems.push(this.createColumn(i));
     }
 
-    this.renderIndex = 0;  // 渲染索引
-    this.activeNodes = new Map();  // 当前活跃节点（索引 -> DOM）
+    this.renderIndex = 0;  // 渲染索引（保留兼容性）
+    this.activeNodes = new Map();  // 当前活跃节点（数据ID -> DOM）
     this.nodePool = [];            // DOM 节点池
 
+    // 新方案：初始化数据ID映射
+    this.dataIdMap = new Map(); // 数据ID -> 布局信息映射
+    this.nextDataId = 0; // 下一个数据ID
+    this.renderedDataIds = new Set(); // 已渲染的数据ID集合
+
+    // 为初始数据分配数据ID
+    this.options.data.forEach((item, index) => {
+        const dataId = index; //this.nextDataId++;
+        this.dataIdMap.set(dataId, {
+            data: true,//item,
+            originalIndex: index,
+            layoutInfo: null // 将在布局时填充
+        });
+    });
+
     this.init();
 }
 
+
 Waterfall.prototype.init = function () {
     const self = this;
     const options = this.options;
@@ -99,6 +122,8 @@ Waterfall.prototype.init = function () {
 
     this.nodePool = [];            // DOM 节点池
     this.activeNodes = new Map();  // 当前活跃节点（索引 -> DOM）
+    this.allReadyNodes = new Map();    // 所有节点（索引 -> DOM）
+    this.renderIndex = 0;  // 渲染索引（保留兼容性）
 
 
 
@@ -134,8 +159,9 @@ Waterfall.prototype.updateVisibleItems = function (force = false) {
     const options = this.options;
     const $container = $(options.container);
 
-    const startTop = this.scrollTop;
+    const startTop = self.scrollTop; // 当前滚动位置
     const endTop = startTop + $container.height();
+    // console.log('startTop', startTop)
 
     // 进行可见区域的渲染更新
     this.updateCardsInView({
@@ -143,23 +169,47 @@ Waterfall.prototype.updateVisibleItems = function (force = false) {
         end: endTop,
         force
     });
+
 }
 
 // 新增卡片
-Waterfall.prototype.appendCard = function (data, index, { top, left }) {
+Waterfall.prototype.appendCard = function (data, dataId, { top, left }) {
+    if (this.renderedDataIds.has(dataId)) {
+        return
+    }
     const self = this;
     const options = this.options;
     const $container = $(options.container);
     const $viewport = $container.find('.waterfall-list-viewport');
+
+    // 新方案：基于数据ID的数据验证
+    if (!this.dataIdMap.has(dataId)) {
+        console.error('Waterfall: Invalid dataId in appendCard', dataId);
+        return null;
+    }
+
+    const dataInfo = this.dataIdMap.get(dataId);
+    if (!dataInfo || !dataInfo.data) {
+        console.warn('Waterfall: Empty data for dataId', dataId);
+    }
+
+
     const $card = $(
         `<div class="waterfall-item" 
-              data-index="${index}"
-              style="position: absolute;transform:translate(${left}px,${top}px); width:${this.columnWidth}px;"
+              data-index="${dataId}"
+              style="position: absolute;transform:translate(${left}px,${top}px);"
         >
-        ${options.renderItem(data, index)}
+        ${options.renderItem(data, dataInfo.originalIndex)}
          </div> `
     );
 
+    this.renderedDataIds.add(dataId);
+
+    if (options.columns !== 1) {
+        $card.width(this.columnWidth + 'px');
+    }
+
+
     $viewport.append($card);
     return $card;
 }
@@ -174,49 +224,105 @@ Waterfall.prototype.updateCardsInView = function ({ start, end, force = false })
         this.createCards({ end: endBuffer });
     }
 
-    // 基于已有的列信息，进行高度可视区域下的判定 操作已有信息。 如果是新建信息 则依赖上方的createCards方法进行创建,那么在上方会异步创建新卡片。
-    // 阶段1：复用已有节点
+    const startNum = start - options.bufferHeight;
+    const endNum = end + options.bufferHeight;
+    // 新方案：基于数据ID映射机制
     const newActiveNodes = new Map();
     for (let i = 0; i < this.columns; i++) {
         const column = this.columnItems[i];
 
         for (let j = 0; j < column.children.length; j++) {
             const row = column.children[j];
-            const renderIndex = row.renderIndex;
+            const dataId = row.dataId; // 使用dataId替代renderIndex
+
+            // 验证数据ID有效性
+            if (!this.dataIdMap.has(dataId)) {
+                console.warn('Waterfall: Invalid dataId detected', dataId);
+                continue;
+            }
+
+            const dataInfo = this.dataIdMap.get(dataId);
+
+            if (!dataInfo) {
+                console.warn('Waterfall: Invalid data for dataId', dataId);
+                continue;
+            }
+
+            const data = options.data[dataId]
+
+            // 如果当前这个节点是特殊节点 不用做处理
+            // 如果是特殊的静态占用元素卡片，需要指定节点不变更的数据，那么该数据的节点不能被其他数据使用
+            let specialNode = false;
+            if (options.shouldOccupySpace) {
+                specialNode = options.shouldOccupySpace(data) || false;
+            }
+            if (specialNode) {
+                continue;
+            }
+
             // 在可视区域内 进行有关卡片的操作
-            if (row.top <= end && row.bottom >= start) {
+            const bool = row.top <= endNum && row.bottom >= startNum;
+            if (bool) {
                 // 理论上什么都不动，因为卡片的位置不会变
-                const $card = this.activeNodes.get(renderIndex);
+                const $card = this.activeNodes.get(dataId);
 
                 let $node = null;
-                // 如果卡片已经在DOM中，则不用更新位置
+
+                // 遍历当前的节点是否被占用，如果被占用的话，就得要从nodePool中取一个
+                let bool = true;
                 if ($card) {
+                    bool = hasNodeInActives(newActiveNodes, $card)
+                }
+                // 如果卡片已经在DOM中，则不用更新位置
+                if (bool === false) {
                     $node = $card;
-                    this.activeNodes.delete(renderIndex);
+                    this.activeNodes.delete(dataId);
+                    // 如果是强更，这里才会采取更新
                     if (force) {
-                        this.updateRenderUI($node, options.data[renderIndex], renderIndex);
+                        this.updateRenderUI($node, data, dataId);
                     }
+
                 } else {
-                    // 卡片不在DOM中，则更新位置
-                    let nodePool = this.nodePool;
-                    if (nodePool.length === 0) {
-                        // 这里是往上方拖动时，可能需要补建的情况
-                        // 如果池子没有节点,那么进行创建
-                        $node = this.appendCard(options.data[renderIndex], renderIndex, {
-                            top: row.top, left: row.left
-                        })
-                        row.$node = $node;
+                    const $card = this.allReadyNodes.get(dataId);
+                    // 遍历当前的节点是否被占用，如果被占用的话，就得要从nodePool中取一个
+                    let bool = true;
+                    if ($card) {
+                        bool = hasNodeInActives(newActiveNodes, $card)
+                    }
+                    if (bool === false) {
+                        // 如果成功获取到card并没有占用 那么就复用这个card
+                        $node = $card;
+
+                        this.updateRenderUI($node, data, dataId);
+
                     } else {
-                        $node = $(this.nodePool.pop());
-                        $node.css({
-                            'transform': `translate(${row.left}px,${row.top}px)`,
-                        }).attr('data-index', renderIndex);
-                        this.updateRenderUI($node, options.data[renderIndex], renderIndex);
-                        row.$node = $node;
+                        // 卡片不在DOM中，则更新位置
+                        $node = getNodePoolPop(this.nodePool, newActiveNodes);
+                        if ($node === null) {
+                            // 这里是往上方拖动时，可能需要补建的情况
+                            $node = this.appendCard(data, dataId, {
+                                top: row.top, left: row.left
+                            });
+                            row.$node = $node;
+                        } else {
+                            this.updateRenderUI($node, data, dataId);
+                            row.$node = $node;
+                        }
                     }
                 }
+                $node.css({
+                    'transform': `translate(${row.left}px,${row.top}px)`,
+                }).attr('data-index', dataId);
 
-                newActiveNodes.set(renderIndex, $node);
+                newActiveNodes.set(dataId, $node);
+
+                // 清除掉在NodePool中的card
+                const index = this.nodePool.indexOf($card);
+                if (index !== -1) {
+                    this.nodePool.splice(index, 1);
+                }
+
+                // console.log('302-row', row.dataId, dataInfo);
             }
         }
     }
@@ -224,11 +330,16 @@ Waterfall.prototype.updateCardsInView = function ({ start, end, force = false })
     // 阶段2：处理不活跃节点
     this.activeNodes.forEach($node => {
         $node.css('transform', `translateY(-9999px)`);// 移出可视区域
-        this.nodePool.push($node);
+        if (this.nodePool.indexOf($node) === -1) {
+            this.nodePool.push($node);
+        }
     });
     this.activeNodes = newActiveNodes;
+    // console.log('this.activeNodes', this.activeNodes);
+    // console.log('this.nodePool', this.nodePool);
 }
 
+
 Waterfall.prototype.getMaxHeight = function () {
     let maxHeight = 0;
     for (let i = 0; i < this.columns; i++) {
@@ -276,79 +387,127 @@ Waterfall.prototype.getMinHeightColumn = function () {
 }
 
 // 创建卡片
-Waterfall.prototype.createCards = function ({ end }) {
+Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
     const self = this;
     const options = this.options;
     const $container = $(options.container);
-    const renderIndex = this.renderIndex;
 
-    if (renderIndex >= options.data.length) {
+    // 新方案：获取下一个未渲染的数据ID
+    let nextDataId = null;
+    for (let [dataId, dataInfo] of this.dataIdMap) {
+        if (!this.renderedDataIds.has(dataId)) {
+            nextDataId = dataId;
+            break;
+        }
+    }
+
+
+    // 如果没有更多数据需要渲染
+    if (nextDataId === null) {
         const maxHeight = this.getMaxHeight();
-        // 设置一次整体高度
-        $(options.container).find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom)
+        $container.find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
         return;
     }
 
+    const dataInfo = this.dataIdMap.get(nextDataId);
+    if (!dataInfo || !dataInfo.data) {
+        console.warn('Waterfall: Invalid data for dataId', nextDataId);
+        this.renderedDataIds.add(nextDataId);
+        return;
+    }
+
+    if (this.renderIndex >= options.data.length) {
+        const maxHeight = this.getMaxHeight();
+        $container.find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
+        return
+    }
+
+    const data = options.data[nextDataId];
+
     let column = this.getMinHeightColumn();
     if (column === null) {
-        // 没有可用的列，则在第一列创建，说明此时还没有数据
         column = this.columnItems[0];
     }
 
     const top = column.bottom === 0 ? options.marginTop : (column.bottom + options.rowGap);
+    const position = { top, left: column.left };
+    const row = createDefaultRow(position);
 
-    // 设置卡片位置
-    const position = {
-        top,
-        left: column.left,
-    }
+    this.renderIndex += 1;
 
-    const row = createDefaultRow(position);
+    let specialNode = false;
 
+    // 如果是特殊的卡片，需要指定节点不变更的数据，那么该数据的节点不能被其他数据使用
+    if (options.shouldOccupySpace) {
+        specialNode = options.shouldOccupySpace(data) || false;
+    }
 
-    // 添加卡片
+    // 添加卡片，使用dataId作为唯一标识
     let $card = null;
-    if (this.nodePool.length === 0) {
-        $card = this.appendCard(options.data[renderIndex], renderIndex, position);
+    if (this.nodePool.length === 0 || specialNode === true) {
+        $card = this.appendCard(data, nextDataId, position);
     } else {
-        $card = $(this.nodePool.pop());
-        $card.css({
-            'transform': `translate(${row.left}px,${row.top}px)`,
-        }).attr('data-index', renderIndex);
-        this.updateRenderUI($card, options.data[renderIndex], renderIndex);
-    }
+        const $tmp = getNodePoolPop(this.nodePool, this.activeNodes);
+        if ($tmp) {
+            $card = $tmp;
+            $card.css({
+                'transform': `translate(${row.left}px,${row.top}px)`,
+            }).attr('data-index', nextDataId);
+            this.updateRenderUI($card, data, nextDataId);
+        } else {
+            $card = this.appendCard(data, nextDataId, position);
+        }
 
+    }
 
     row.$node = $card;
+    row.dataId = nextDataId; // 使用dataId替代renderIndex
+    if (dataId !== -1) {
+        row.dataId = dataId;
+    }
+
+    // 记录布局信息
+    // dataInfo.layoutInfo = {
+    //     //columnIndex: this.columnItems.indexOf(column),
+    //     //position: position,
+    //     // row: row
+    // };
+
 
-    // 把新增的卡片放进 activeNodes, 当前是 展示状态的
-    this.activeNodes.set(renderIndex, $card);
 
 
+    if (specialNode === false) {
+        // 把新增的卡片放进 activeNodes 当成活跃节点元素，那么是 可以动态使用的
+        this.activeNodes.set(nextDataId, $card);
+
+        this.allReadyNodes.set(nextDataId, $card);
+    } else {
+        // 如果是特殊的，这里不要记录了 
+        this.allReadyNodes.set(nextDataId, null);
+    }
+
+    this.renderedDataIds.add(nextDataId);
+
     // 更新列的底部距离
     column.bottom = top + $card.height();
     column.children.push(row);
-
-    // 计算当前卡片的位置
     row.bottom = column.bottom;
-    row.renderIndex = renderIndex;
-
-    this.renderIndex += 1;
-
-    let hasNextData = this.renderIndex < options.data.length;
 
+    // 检查是否需要继续创建卡片
     const minHeight = this.getMinHeight();
-    if (hasNextData && (minHeight < end)) {
+    const hasMoreData = this.renderedDataIds.size < this.dataIdMap.size;
+
+    if (hasMoreData && (minHeight < end)) {
         window.requestAnimationFrame(() => {
             this.createCards({ end });
         });
     } else {
         const maxHeight = this.getMaxHeight();
-        // 设置一次整体高度
-        $(options.container).find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom)
+        $(options.container).find('.waterfall-list-scroll').css('height', maxHeight + options.marginBottom + 'px');
     }
 }
 
+
 Waterfall.prototype.createColumn = function (index) {
     const res = {
         left: 0,
@@ -365,33 +524,137 @@ Waterfall.prototype.createColumn = function (index) {
     return res;
 }
 
-Waterfall.prototype.updateRenderUI = function ($node, data, index) {
+Waterfall.prototype.updateRenderUI = function ($node, data, dataId) {
     const options = this.options;
+
+    // 新方案：基于数据ID的数据验证
+    if (!this.dataIdMap.has(dataId)) {
+        console.error('Waterfall: Invalid dataId in updateRenderUI', dataId);
+        return;
+    }
+
+    const dataInfo = this.dataIdMap.get(dataId);
+    if (!dataInfo || !dataInfo.data) {
+        console.warn('Waterfall: Empty data for dataId', dataId);
+    }
+
     if (this.hasUpdateItem === true) {
-        options.updateItem($node, data, index)
+        options.updateItem($node, data, dataInfo.originalIndex)
     } else {
-        $node.html(options.renderItem(data, index));
+        $node.html(options.renderItem(data, dataInfo.originalIndex));
     }
 }
 
+
+
 Waterfall.prototype.updateData = function (newData) {
-    this.options.data = newData;
+    const options = this.options;
+    options.data = newData;
+
+    // 新方案：重新建立数据ID映射
+    //this.dataIdMap.clear();
+    //this.renderedDataIds.clear();
+    //this.nextDataId = 0;
+
+    // 为每个数据项分配唯一ID
+    options.data.forEach((item, index) => {
+        const dataId = index; // this.nextDataId++;
+        if (!this.allReadyNodes.has(dataId)) {
+            this.dataIdMap.set(dataId, {
+                data: true,// item,
+                originalIndex: index,
+                layoutInfo: null // 将在布局时填充
+            });
+            // 如果没有准备好这个数据，这里要创建一个占位节点
+            this.createCards({ end: 0, dataId });
+        }
+    });
+
     this.updateVisibleItems(true); // 强制更新渲染
+
+    // 重新计算所有卡片位置并更新位置
+    // this.updatePointCards();
+}
+
+
+
+// 重新计算设置一遍所有的卡片位置
+Waterfall.prototype.updatePointCards = function () {
+    // 有问题 不要用
+    return
+    const self = this;
+    const options = this.options;
+    const columnItems = this.columnItems;
+    let top = options.marginTop;
+    for (let i = 0; i < columnItems.length; i++) {
+        const column = columnItems[i];
+        // 这里为了简化，各列的瀑布流保持不动，只更新各列下节点的top位置，不做节点的跨列位移
+        for (let j = 0; j < column.children.length; j++) {
+            const row = column.children[j];
+            const $card = row.$node;
+
+            // 验证数据ID有效性
+            if (!this.dataIdMap.has(row.dataId)) {
+                console.warn('Waterfall: Invalid dataId in updatePointCards', row.dataId);
+                continue;
+            }
+
+            // 第一个的top不需要更新
+            if (j === 0) {
+                row.bottom = top + $card.height();
+            } else {
+                row.top = column.children[j - 1].bottom + options.rowGap;
+                row.bottom = row.top + $card.height();
+                // 更新卡片位置
+                // $card.css({
+                //     'transform': `translate(${row.left}px,${row.top}px)`,
+                // })
+            }
+
+        }
+        // 设置一次该列的bottom
+        column.bottom = getBottomByColumn(column);
+    }
 }
 
+
 function createDefaultRow({ top, left }) {
     return {
         top,
         left,
         bottom: 0,
         $node: null,
-        renderIndex: -1
+        dataId: -1 // 新方案：使用dataId替代renderIndex
     }
 }
 
-function getBottomByColumn(rows) {
-    if (rows.children.length === 0) {
+
+function getBottomByColumn(column) {
+    if (column.children.length === 0) {
         return 0;
     }
-    return rows[rows.length - 1].bottom;
+    const child = column.children;
+    return child[child.length - 1].bottom;
+}
+
+function hasNodeInActives(mapObj, $node) {
+    let bool = false
+    mapObj.forEach((item) => {
+        if (item === $node) {
+            bool = true;
+        }
+    });
+    return bool;
+}
+
+// 从众多jq对象数组取得一个不重复的
+function getNodePoolPop(nodePool, actives) {
+    for (let i = 0; i < nodePool.length; i++) {
+        const $node = nodePool[i];
+        if (!hasNodeInActives(actives, $node)) {
+            nodePool.splice(i, 1);
+            return $node;
+        }
+    }
+    return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tencent.jquery.pix.component",
-  "version": "1.0.62",
+  "version": "1.0.63-beta.2",
   "description": "",
   "main": "index.js",
   "files": [