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

package/components/waterfall/waterfall.js

@@ -19,6 +19,7 @@ const DEFAULTS = {
     // 传入 $node, data, index
     updateItem: null, // 元素更新时的回调函数
     onscroll: null,   // 滚动事件回调函数
+    shouldOccupySpace: null // 是否是静态数据的回调函数，静态数据能够占用元素
 };
 
 export function Waterfall(optionsInput = {}) {
@@ -104,7 +105,7 @@ export function Waterfall(optionsInput = {}) {
     this.options.data.forEach((item, index) => {
         const dataId = index; //this.nextDataId++;
         this.dataIdMap.set(dataId, {
-            data: item,
+            data: true,//item,
             originalIndex: index,
             layoutInfo: null // 将在布局时填充
         });
@@ -173,6 +174,9 @@ Waterfall.prototype.updateVisibleItems = function (force = false) {
 
 // 新增卡片
 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);
@@ -189,6 +193,7 @@ Waterfall.prototype.appendCard = function (data, dataId, { top, left }) {
         console.warn('Waterfall: Empty data for dataId', dataId);
     }
 
+
     const $card = $(
         `<div class="waterfall-item" 
               data-index="${dataId}"
@@ -198,11 +203,13 @@ Waterfall.prototype.appendCard = function (data, dataId, { top, left }) {
          </div> `
     );
 
+    this.renderedDataIds.add(dataId);
 
     if (options.columns !== 1) {
         $card.width(this.columnWidth + 'px');
     }
 
+
     $viewport.append($card);
     return $card;
 }
@@ -243,6 +250,16 @@ Waterfall.prototype.updateCardsInView = function ({ start, end, force = false })
 
             const data = options.data[dataId]
 
+            // 如果当前这个节点是特殊节点 不用做处理
+            // 如果是特殊的静态占用元素卡片，需要指定节点不变更的数据，那么该数据的节点不能被其他数据使用
+            let specialNode = false;
+            if (options.shouldOccupySpace) {
+                specialNode = options.shouldOccupySpace(data) || false;
+            }
+            if (specialNode) {
+                continue;
+            }
+
             // 在可视区域内 进行有关卡片的操作
             const bool = row.top <= endNum && row.bottom >= startNum;
             if (bool) {
@@ -251,8 +268,6 @@ Waterfall.prototype.updateCardsInView = function ({ start, end, force = false })
 
                 let $node = null;
 
-
-
                 // 遍历当前的节点是否被占用，如果被占用的话，就得要从nodePool中取一个
                 let bool = true;
                 if ($card) {
@@ -290,18 +305,15 @@ Waterfall.prototype.updateCardsInView = function ({ start, end, force = false })
                             });
                             row.$node = $node;
                         } else {
-                            //$node = $(this.nodePool.pop());
                             this.updateRenderUI($node, data, dataId);
                             row.$node = $node;
                         }
                     }
                 }
-
                 $node.css({
                     'transform': `translate(${row.left}px,${row.top}px)`,
                 }).attr('data-index', dataId);
 
-
                 newActiveNodes.set(dataId, $node);
 
                 // 清除掉在NodePool中的card
@@ -389,6 +401,7 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
         }
     }
 
+
     // 如果没有更多数据需要渲染
     if (nextDataId === null) {
         const maxHeight = this.getMaxHeight();
@@ -403,10 +416,14 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
         return;
     }
 
-    if (this.renderIndex >= this.options.data.length) {
+    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];
@@ -418,16 +435,29 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
 
     this.renderIndex += 1;
 
+    let specialNode = false;
+
+    // 如果是特殊的卡片，需要指定节点不变更的数据，那么该数据的节点不能被其他数据使用
+    if (options.shouldOccupySpace) {
+        specialNode = options.shouldOccupySpace(data) || false;
+    }
+
     // 添加卡片，使用dataId作为唯一标识
     let $card = null;
-    if (this.nodePool.length === 0) {
-        $card = this.appendCard(dataInfo.data, nextDataId, 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', nextDataId);
-        this.updateRenderUI($card, dataInfo.data, nextDataId);
+        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;
@@ -437,15 +467,25 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
     }
 
     // 记录布局信息
-    dataInfo.layoutInfo = {
-        columnIndex: this.columnItems.indexOf(column),
-        position: position,
-        row: row
-    };
-
-    // 把新增的卡片放进 activeNodes
-    this.activeNodes.set(nextDataId, $card);
-    this.allReadyNodes.set(nextDataId, $card);
+    // dataInfo.layoutInfo = {
+    //     //columnIndex: this.columnItems.indexOf(column),
+    //     //position: position,
+    //     // row: row
+    // };
+
+
+
+
+    if (specialNode === false) {
+        // 把新增的卡片放进 activeNodes 当成活跃节点元素，那么是 可以动态使用的
+        this.activeNodes.set(nextDataId, $card);
+
+        this.allReadyNodes.set(nextDataId, $card);
+    } else {
+        // 如果是特殊的，这里不要记录了 
+        this.allReadyNodes.set(nextDataId, null);
+    }
+
     this.renderedDataIds.add(nextDataId);
 
     // 更新列的底部距离
@@ -463,7 +503,7 @@ Waterfall.prototype.createCards = function ({ end, dataId = -1 }) {
         });
     } 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');
     }
 }
 
@@ -521,7 +561,7 @@ Waterfall.prototype.updateData = function (newData) {
         const dataId = index; // this.nextDataId++;
         if (!this.allReadyNodes.has(dataId)) {
             this.dataIdMap.set(dataId, {
-                data: item,
+                data: true,// item,
                 originalIndex: index,
                 layoutInfo: null // 将在布局时填充
             });
@@ -540,6 +580,8 @@ Waterfall.prototype.updateData = function (newData) {
 
 // 重新计算设置一遍所有的卡片位置
 Waterfall.prototype.updatePointCards = function () {
+    // 有问题 不要用
+    return
     const self = this;
     const options = this.options;
     const columnItems = this.columnItems;

package/package.json

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