virtual-image-layout 1.0.0

package/README.md

@@ -0,0 +1,163 @@
+# 图片瀑布流布局 - 虚拟列表
+
+一个基于虚拟列表技术的高性能图片瀑布流布局项目，支持大量图片的流畅展示。
+
+## 功能特性
+
+- **虚拟列表渲染**：只渲染可视区域内的图片，大幅提升性能
+- **等高布局算法**：智能计算每行图片的宽度，保持行高一致
+- **响应式设计**：自动适配不同屏幕尺寸
+- **懒加载**：滚动加载更多图片
+- **图片曝光统计**：使用 IntersectionObserver API 监听图片曝光
+- **错误处理**：自动移除加载失败的图片
+
+## 技术栈
+
+- **原生 JavaScript**：核心布局算法
+- **jQuery**：DOM 操作和事件处理
+- **CSS3**：样式和动画效果
+- **IntersectionObserver API**：图片曝光监听
+
+## 项目结构
+
+```
+├── css/
+│   └── index.css           # 样式文件
+├── js/
+│   ├── index.js            # 虚拟列表核心类 (VirtualImageLayout)
+│   ├── list.js             # 页面逻辑和数据渲染
+│   └── data.js             # 图片数据
+├── image-layout.html       # 主页面
+└── README.md               # 项目文档
+```
+
+## 快速开始
+
+### 1. 克隆项目
+
+```bash
+git clone <repository-url>
+cd <project-directory>
+```
+
+### 2. 打开页面
+
+直接在浏览器中打开 `image-layout.html` 文件即可。
+
+## 使用说明
+
+### 基本用法
+
+```javascript
+// 初始化虚拟列表
+var layout = new VirtualImageLayout('container', {
+    rowGap: 16,              // 行间距
+    titleGap: 30,            // 标题高度（可选）
+
+    // 自定义渲染函数
+    onRenderItem: (item, imgWidth, imgHeight, rowHeight) => {
+        return `
+            <div class="images-gallery">
+                <a class="images" style="width: ${imgWidth}px; height: ${imgHeight}px;">
+                    <img src="${item.img}" alt="${item.res_name}">
+                </a>
+                <a class="name">${item.res_name}</a>
+            </div>
+        `;
+    },
+
+    // 曝光回调（可选）
+    ExposureCallback(burialPoint) {
+        console.log('曝光数据:', burialPoint);
+    }
+});
+
+// 添加图片数据
+layout.addImages(imageData);
+```
+
+### 数据格式
+
+```javascript
+var jsonData = [
+    {
+        "res_name": "图片标题",
+        "img": "https://example.com/image.jpg",
+        "width": 1920,
+        "height": 1080
+    },
+    // 更多图片...
+];
+```
+
+## 核心类说明
+
+### VirtualImageLayout
+
+虚拟列表核心类，负责图片布局和渲染。
+
+#### 构造函数参数
+
+| 参数 | 类型 | 说明 |
+|------|------|------|
+| containerId | String | 容器元素 ID |
+| options | Object | 配置选项 |
+
+#### 配置选项
+
+| 选项 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| rowGap | Number | 16 | 行间距（像素） |
+| titleGap | Number | - | 标题高度（像素），设置后显示标题 |
+| onRenderItem | Function | - | 自定义渲染函数 |
+| ExposureCallback | Function | - | 图片曝光回调函数 |
+
+#### 主要方法
+
+- `addImages(images)`: 添加图片数据
+- `updateVirtualRows()`: 更新可视区域的行
+- `handleResize()`: 处理窗口大小变化
+
+## 性能优化
+
+1. **虚拟滚动**：只渲染可视区域 + 缓冲区的图片
+2. **防抖处理**：滚动和窗口大小变化事件使用防抖
+3. **图片懒加载**：滚动到底部自动加载更多
+4. **智能布局算法**：动态计算目标行高，适配不同屏幕
+
+## 浏览器兼容性
+
+- Chrome (推荐)
+- Firefox
+- Safari
+- Edge
+
+需要支持 ES6+ 和 IntersectionObserver API。
+
+## 开发说明
+
+### 修改样式
+
+编辑 `css/index.css` 文件来自定义样式。
+
+### 修改数据
+
+编辑 `js/data.js` 文件来修改图片数据。
+
+### 自定义渲染
+
+在 `js/list.js` 中修改 `onRenderItem` 函数来自定义图片卡片的渲染方式。
+
+## 注意事项
+
+1. 图片数据必须包含 `width` 和 `height` 字段
+2. 建议图片宽度大于高度，以获得更好的布局效果
+3. 图片链接必须是公开可访问的 URL
+
+## License
+
+MIT
+
+## 贡献
+
+欢迎提交 Issue 和 Pull Request！

package/css/index.css

@@ -0,0 +1,118 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f5f5f5;
+       padding:50px;
+}
+/* .list-page{
+   padding-left: 108px;
+} */
+
+.justified-gallery {
+    padding-bottom: 0;
+    margin: 0;
+    width: 100%;
+    min-height: 200px;
+    position: relative;
+}
+
+.justified-gallery .image-row {
+    display: flex;
+    position: absolute;
+    left: 0;
+    width: 100%;
+}
+
+.justified-gallery .images-gallery {
+    flex-shrink: 0;
+    overflow: hidden;
+    cursor: pointer;
+    transition: transform 0.3s;
+    position: relative;
+    border-radius: 8px;
+}
+
+.justified-gallery .images-gallery img {
+    display: block;
+    border-radius: 8px;
+    max-width: 100%;
+    max-height: 100%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+
+.justified-gallery .images-gallery .images {
+    border-radius: 8px;
+    position: relative;
+    display: block;
+    overflow: hidden;
+    background-color: #dddddd;
+}
+
+.name{
+    position: absolute;
+    display: block;
+    /* 溢出影藏出现省略号 */
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* //  加载更多动画 */
+.load-more-waterfall {
+    padding: 50px 0 60px;
+    text-align: center;
+    color: #86909C;
+    font-size: 14px;
+}
+
+.wave-loading {
+    text-align: center;
+}
+
+.wave-loading span {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: rgb(197, 197, 197);
+    margin: 0 2px;
+    animation: wave-loading 1s ease-in-out infinite;
+    animation-delay: calc(0.1s * var(--time));
+}
+
+@keyframes wave-loading {
+    0% {
+        transform: translateY(0px);
+        opacity: 1;
+    }
+
+    25% {
+        transform: translateY(-10px);
+        opacity: 0.1;
+    }
+
+    50%,
+    100% {
+        transform: translateY(0px);
+        opacity: 1;
+    }
+}
+
+@keyframes globalnav-search-input-intro {
+    0% {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}

package/js/index.js

@@ -0,0 +1,644 @@
+class VirtualImageLayout {
+    constructor(containerId, options = {}) {
+        this.container = document.getElementById(containerId);
+        this.rowGap = options.rowGap || 16;
+        this.titleGap = options.titleGap; // 标题高度，如果设置了就显示标题
+        this.containerWidth = this.container.offsetWidth;
+        this.targetHeight = this.calculateTargetHeight(); // 动态计算目标行高
+
+        // 回调函数
+        this.onRenderItem = options.onRenderItem;
+        this.onImageExpose = options.onImageExpose || null; // 图片曝光回调
+
+        // 虚拟列表相关
+        this.allRows = []; // 所有行的数据和位置信息
+        this.renderedRows = {}; // 已渲染的行 {rowIndex: element}
+        this.viewportHeight = window.innerHeight;
+        this.bufferZone = this.viewportHeight * 2; // 缓冲区
+        this.scrollTop = 0;
+        this.containerOffsetTop = 0;
+
+        // 图片数据
+        this.pendingImages = [];
+        this.allImages = [];
+
+        // 曝光监听相关
+        this.data = options;
+        this.site_num = [];
+        // 埋点参数
+        this.BurialPoint = {
+            res_detail: []
+        };
+        this.indexReportedArr = []; // 上报记录
+        this.maxNum = 30;
+        this._observer = null; // IntersectionObserver 实例
+        this._timer = null; // 定时器
+
+        if (typeof options.ExposureCallback === 'function') {
+            //全局只会实例化一次Exposure类，init方法只会执行一次
+            this.setupIntersectionObserver();
+        }
+        this.init();
+    }
+
+    init() {
+        this.containerOffsetTop = this.getContainerOffsetTop();
+        this.setupScrollListener();
+        this.setupResizeListener();
+        this.handleImageError();
+    }
+
+    getContainerOffsetTop() {
+        const rect = this.container.getBoundingClientRect();
+        return rect.top + window.pageYOffset;
+    }
+
+    // 根据容器宽度动态计算目标行高
+    calculateTargetHeight() {
+        const containerWidth = this.containerWidth;
+        if (containerWidth < 600) {
+            return 200;
+        } else if (containerWidth < 1600) {
+            return 220;
+        }else if (containerWidth < 1920) {
+            return 230;
+        } else {
+            return 250;
+        }
+    }
+
+    // 添加图片数据
+    addImages(images) {
+        // 如果没有数据，直接返回
+        if (!images || images.length === 0) {
+            return;
+        }
+
+        // ✅ 如果存在临时最后一行，先移除它并恢复 pendingImages
+        if (this.allRows.length > 0) {
+            const lastRow = this.allRows[this.allRows.length - 1];
+            if (lastRow.isTempLastRow) {
+                // 移除临时最后一行
+                this.allRows.pop();
+                // 恢复 pendingImages
+                this.pendingImages = [...lastRow.images];
+                // 从 allImages 中移除这些图片（因为它们要重新布局）
+                this.allImages.splice(this.allImages.length - lastRow.images.length, lastRow.images.length);
+
+                // 移除已渲染的临时行 DOM
+                if (this.renderedRows[lastRow.rowIndex]) {
+                    this.renderedRows[lastRow.rowIndex].remove();
+                    delete this.renderedRows[lastRow.rowIndex];
+                }
+            }
+        }
+
+        // ✅ 先记录当前图片总数（作为新图片的起始索引）
+        const startIndex = this.allImages.length;
+
+        // 保存所有图片
+        this.allImages.push(...images);
+
+        // 布局新图片（传入起始索引）
+        const newRows = this.layoutImages(images, startIndex);
+
+        // 计算新行位置
+        let startTop = 0;
+        if (this.allRows.length > 0) {
+            const lastRow = this.allRows[this.allRows.length - 1];
+            const maxAllowedHeight = this.targetHeight + 15;
+            const lastRowActualHeight = Math.min(lastRow.height, maxAllowedHeight);
+            // 行高需要加上titleGap（如果设置了）
+            const lastRowTotalHeight = this.titleGap ? (lastRowActualHeight + this.titleGap) : lastRowActualHeight;
+            startTop = lastRow.top + lastRowTotalHeight + this.rowGap;
+        }
+
+        newRows.forEach((row) => {
+            row.top = startTop;
+            row.rowIndex = this.allRows.length;
+            this.allRows.push(row);
+            // 使用限制后的高度计算下一行位置
+            const maxAllowedHeight = this.targetHeight + 15;
+            const actualHeight = Math.min(row.height, maxAllowedHeight);
+            // 行高需要加上titleGap（如果设置了）
+            const rowTotalHeight = this.titleGap ? (actualHeight + this.titleGap) : actualHeight;
+            startTop += rowTotalHeight + this.rowGap;
+        });
+
+        // ✅ 如果有剩余图片（pendingImages），创建一个临时最后一行
+        if (this.pendingImages.length > 0) {
+            const height = this.targetHeight;
+            const tempLastRow = {
+                images: [...this.pendingImages],
+                height: height,
+                isTempLastRow: true,  // 标记为临时最后一行
+                isLastRow: true,      // 也需要 isLastRow 标记，用于渲染时不拉伸
+                top: startTop,
+                rowIndex: this.allRows.length,
+                containerWidth: this.containerWidth
+            };
+
+            this.allRows.push(tempLastRow);
+
+            // 使用限制后的高度计算容器高度
+            const maxAllowedHeight = this.targetHeight + 15;
+            const actualHeight = Math.min(height, maxAllowedHeight);
+            const rowTotalHeight = this.titleGap ? (actualHeight + this.titleGap) : actualHeight;
+            startTop += rowTotalHeight + this.rowGap;
+        }
+
+        // 更新容器高度
+        this.container.style.height = `${startTop}px`;
+
+        // 更新虚拟渲染
+        this.updateVirtualRows();
+    }
+
+    calculateCropSize(originalWidth, originalHeight) {
+        const ratio = originalWidth / originalHeight;
+        let cropRatio;
+
+        if (ratio >= 1 && ratio <= 1.65) {
+            // 不裁剪，保持原始比例
+            cropRatio = ratio;
+        } else if (ratio > 1.65) {
+            // 居中裁剪为 1.65:1
+            cropRatio = 1.65;
+        } else {
+            // 居中裁剪为 1:1（正方形）
+            cropRatio = 1.0;
+        }
+
+        // 返回裁剪后的宽高比，用于布局计算
+        return {
+            width: cropRatio * this.targetHeight,  // 仅用于显示，实际渲染时会重新计算
+            height: this.targetHeight,             // 仅用于显示，实际渲染时会重新计算
+            ratio: cropRatio,                      // ✅ 关键：只保存比例，不保存具体尺寸
+            originalRatio: ratio                   // 保存原始比例，用于判断是否需要裁剪
+        };
+    }
+
+    layoutImages(images, startIndex, forceRecalculate = false) {
+        const rows = [];
+        let currentRow = [];
+        let currentRowWidthRatios = 0;
+
+        if (this.pendingImages.length > 0) {
+            currentRow = [...this.pendingImages];
+            // ✅ 重新计算 pendingImages 的 cropRatio，确保使用最新的 targetHeight
+            currentRow.forEach(img => {
+                const width = img.width;
+                const height = img.height;
+                const originalRatio = width / height;
+                img.cropWidth = originalRatio * this.targetHeight;
+                img.cropHeight = this.targetHeight;
+                img.cropRatio = originalRatio;
+                img.originalRatio = originalRatio;
+            });
+            currentRowWidthRatios = currentRow.reduce((sum, img) => sum + img.cropRatio, 0);
+            this.pendingImages = [];
+        }
+
+        images.forEach((image, index) => {
+            if (image.img_url === '' && image.img === '') return;
+
+            // ✅ 强制重新计算或首次计算时，重新计算 cropSize
+            if (forceRecalculate || !image.cropRatio) {
+                const width = image.view_data?.width || image.width;
+                const height = image.view_data?.height || image.height;
+                const originalRatio = width / height;
+                image.cropWidth = originalRatio * this.targetHeight;
+                image.cropHeight = this.targetHeight;
+                image.cropRatio = originalRatio;
+                image.originalRatio = originalRatio;
+            }
+
+            // ✅ 只在没有 data_index 时才设置（避免 resize 时重复设置）
+            if (!image.data_index) {
+                image.data_index = startIndex + index + 1;
+            }
+
+            const potentialRatios = currentRowWidthRatios + image.cropRatio;
+            const gapCount = currentRow.length;
+            const availableWidth = this.containerWidth - gapCount * this.rowGap;
+            const potentialHeight = availableWidth / potentialRatios;
+            const minHeight = this.targetHeight - 10;
+
+            if (potentialHeight >= minHeight) {
+                currentRow.push(image);
+                currentRowWidthRatios = potentialRatios;
+            } else {
+                if (currentRow.length > 0) {
+                    rows.push({
+                        images: currentRow,
+                        height: this.calculateRowHeight(currentRow),
+                        containerWidth: this.containerWidth
+                    });
+                }
+                currentRow = [image];
+                currentRowWidthRatios = image.cropRatio;
+            }
+
+            if (index === images.length - 1 && currentRow.length > 0) {
+                this.pendingImages = currentRow;
+            }
+        });
+
+        return rows;
+    }
+
+    calculateRowHeight(images) {
+        const totalRatio = images.reduce((sum, img) => sum + img.cropRatio, 0);
+        const availableWidth = this.containerWidth - (images.length - 1) * this.rowGap;
+        const height = availableWidth / totalRatio;
+
+        return height;
+    }
+
+    // 虚拟滚动核心：更新可见行
+    updateVirtualRows() {
+        const scrollTop = this.scrollTop - this.containerOffsetTop;
+        const viewportTop = Math.max(0, scrollTop - this.bufferZone);
+        const viewportBottom = scrollTop + this.viewportHeight + this.bufferZone;
+
+        const rowsToRender = new Set();
+        const rowsToRemove = new Set(Object.keys(this.renderedRows).map(Number));
+
+        this.allRows.forEach((row, index) => {
+            const rowBottom = row.top + row.height;
+            if (rowBottom >= viewportTop && row.top <= viewportBottom) {
+                rowsToRender.add(index);
+                rowsToRemove.delete(index);
+            }
+        });
+
+        // 移除不可见的行
+        rowsToRemove.forEach(rowIndex => {
+            if (this.renderedRows[rowIndex]) {
+                this.renderedRows[rowIndex].remove();
+                delete this.renderedRows[rowIndex];
+            }
+        });
+
+        // 渲染新行
+        rowsToRender.forEach(rowIndex => {
+            if (!this.renderedRows[rowIndex]) {
+                const row = this.allRows[rowIndex];
+                const rowElement = this.renderRow(row);
+                this.renderedRows[rowIndex] = rowElement;
+                this.container.appendChild(rowElement);
+            }
+        });
+    }
+
+    renderRow(row) {
+        const rowDiv = document.createElement('div');
+        rowDiv.className = 'image-row';
+        if (row.isLastRow) {
+            rowDiv.classList.add('last-row');
+        }
+        rowDiv.style.top = `${row.top}px`;
+
+        // 限制行高：最多超过目标高度15像素
+        const maxAllowedHeight = this.targetHeight + 15;
+        const actualHeight = Math.min(row.height, maxAllowedHeight);
+        // 行高需要加上titleGap（如果设置了）
+        const rowTotalHeight = this.titleGap ? (actualHeight + this.titleGap) : actualHeight;
+        rowDiv.style.height = `${rowTotalHeight}px`;
+        rowDiv.style.gap = `${this.rowGap}px`;
+        rowDiv.dataset.rowIndex = row.rowIndex;
+
+        if (row.isLastRow) {
+            // 最后一行：保持图片原始比例，不拉伸填满
+            row.images.forEach(image => {
+                const imgWidth = actualHeight * image.cropRatio;
+                const imgHeight = actualHeight;
+                const itemDiv = this.createImageItem(image, imgWidth, imgHeight, actualHeight);
+                rowDiv.appendChild(itemDiv);
+
+                // 添加曝光观察
+                if (this._observer && itemDiv) {
+                    this.addExposureObserver(itemDiv, image);
+                }
+            });
+        } else {
+            // 普通行：按 justifiedGallery 算法分配宽度
+            const containerWidth = row.containerWidth || this.containerWidth;
+            let availableWidth = containerWidth - (row.images.length - 1) * this.rowGap;
+
+            row.images.forEach((image, index) => {
+                let imgWidth;
+                if (index === row.images.length - 1) {
+                    // 最后一张图片使用剩余宽度，确保填满整行
+                    imgWidth = availableWidth;
+                } else {
+                    // 使用原始行高计算宽度，确保填满整行
+                    imgWidth = Math.round(row.height * image.cropRatio);
+                    availableWidth -= imgWidth;
+                }
+
+                // 使用限制后的高度显示
+                const imgHeight = actualHeight;
+                const itemDiv = this.createImageItem(image, imgWidth, imgHeight, actualHeight);
+
+                rowDiv.appendChild(itemDiv);
+
+                // 添加曝光观察
+                if (this._observer && itemDiv) {
+                    this.addExposureObserver(itemDiv, image);
+                }
+            });
+        }
+
+        return rowDiv;
+    }
+
+    createImageItem(image, width, height, rowHeight) {
+        const result = this.onRenderItem(image, width, height, rowHeight);
+
+        let itemElement;
+        if (result && typeof result === 'object' && result.jquery) {
+            // 兼容 jQuery 对象（不强依赖 jQuery）
+            itemElement = result[0];
+        } else if (typeof result === 'string') {
+            const temp = document.createElement('div');
+            temp.innerHTML = result;
+            itemElement = temp.firstElementChild;
+        } else {
+            itemElement = result;
+        }
+
+        return itemElement;
+    }
+
+    // 添加曝光观察
+    addExposureObserver(itemElement, image) {
+        if (!this._observer || !itemElement) return;
+
+        // 查找 .images-gallery 元素
+        let targetElement = itemElement;
+        if (!itemElement.classList.contains('images-gallery')) {
+            targetElement = itemElement.querySelector('.images-gallery');
+        }
+
+        if (targetElement) {
+            // 开始观察该元素
+            this._observer.observe(targetElement);
+        }
+    }
+
+    setupScrollListener() {
+        let scrollTimer;
+        window.addEventListener('scroll', () => {
+            clearTimeout(scrollTimer);
+            scrollTimer = setTimeout(() => {
+                this.scrollTop = window.pageYOffset;
+                this.updateVirtualRows();
+            }, 50);
+        });
+    }
+
+    setupResizeListener() {
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                this.handleResize();
+            }, 300);
+        });
+    }
+
+    handleResize() {
+        const newWidth = this.container.offsetWidth;
+        if (newWidth === this.containerWidth) return;
+
+        // ✅ 先更新容器宽度和目标行高
+        this.containerWidth = newWidth;
+        this.targetHeight = this.calculateTargetHeight();
+        this.containerOffsetTop = this.getContainerOffsetTop();
+        this.viewportHeight = window.innerHeight;
+
+        // 清空渲染
+        this.container.innerHTML = '';
+        this.renderedRows = {};
+
+        // 重新计算所有行
+        this.recalculateAllRows();
+        this.updateVirtualRows();
+    }
+
+    recalculateAllRows() {
+        // ✅ 从 this.allImages 获取所有图片，而不是从 this.allRows
+        // 因为 this.allImages 包含了所有已加载的图片（包括第一页、第二页等）
+        const allImages = [...this.allImages];
+
+        this.allRows = [];
+        this.pendingImages = [];
+
+        if (allImages.length > 0) {
+            // ✅ 不传 forceRecalculate，使用已有的 cropRatio
+            // 这样可以确保 resize 后的布局和自然加载的布局完全一致
+            const newRows = this.layoutImages(allImages, 0);
+
+            let startTop = 0;
+            newRows.forEach((row, index) => {
+                row.top = startTop;
+                row.rowIndex = index;
+                this.allRows.push(row);
+                // 使用限制后的高度计算下一行位置
+                const maxAllowedHeight = this.targetHeight + 15;
+                const actualHeight = Math.min(row.height, maxAllowedHeight);
+                // 行高需要加上titleGap（如果设置了）
+                const rowTotalHeight = this.titleGap ? (actualHeight + this.titleGap) : actualHeight;
+                startTop += rowTotalHeight + this.rowGap;
+            });
+
+            // ✅ 只有在没有更多数据时才创建最后一行
+            // 如果还有更多数据（this.hasMore !== false），保留 pendingImages 等待下次加载
+            if (this.pendingImages.length > 0 && this.hasMore === false) {
+                const height = this.targetHeight;
+                const lastRow = {
+                    images: [...this.pendingImages],
+                    height: height,
+                    isLastRow: true,
+                    top: startTop,
+                    rowIndex: this.allRows.length,
+                    containerWidth: this.containerWidth
+                };
+                this.allRows.push(lastRow);
+                this.pendingImages = [];
+                const maxAllowedHeight = this.targetHeight + 15;
+                const actualHeight = Math.min(height, maxAllowedHeight);
+                // 行高需要加上titleGap（如果设置了）
+                const rowTotalHeight = this.titleGap ? (actualHeight + this.titleGap) : actualHeight;
+                startTop += rowTotalHeight + this.rowGap;
+            }
+
+            this.container.style.height = `${startTop}px`;
+        }
+    }
+
+    // 设置 IntersectionObserver 监听图片曝光
+    setupIntersectionObserver() {
+        const self = this;
+        this._observer = new IntersectionObserver((function (entries, observer) {
+            entries.forEach(entry => {
+                //每个元素进入视窗都会触发
+                if (entry.isIntersecting) {
+                    //获取元素信息+
+                    const { index } = entry.target.dataset;
+                    const { cardType } = entry.target.dataset;
+                    if (self.indexReportedArr.indexOf(index) == -1 && !cardType) {
+                        //清除当前定时器
+                        clearTimeout(self._timer);
+                        //收集的数据加到上报数组中
+                        self.site_num.push(index);
+                        let attributeNames = Array.from(entry.target.attributes).map(function (attribute) {
+                            return attribute.name;
+                        });
+                        let customAttributes = {}
+                        let SingleAttributes = {};
+                        // let customAttributes={};
+                        // 判断单个上报唯一标识
+                        if (self.data.single_class && (entry.target.getAttribute('class') || '').indexOf(self.data.single_class) != -1 && typeof self.data.buriledSinglePoint === 'function') {
+                            for (var i = 0; i < attributeNames.length; i++) {
+                                if (attributeNames[i] !== 'style') {
+                                    let new_key = attributeNames[i].indexOf('data-') != -1 ? attributeNames[i].replace('data-', '') : attributeNames[i];
+                                    SingleAttributes[new_key] = entry.target.getAttribute(attributeNames[i]);
+                                }
+                            };
+                            self.data.buriledSinglePoint(SingleAttributes);
+                            //收集的数据加到上报数组中
+                            self.indexReportedArr.push(index);
+                            // //收集到该元素后，取消对该元素dom的观察
+                            self._observer.unobserve(entry.target);
+                            return
+                        } else {
+                            for (var i = 0; i < attributeNames.length; i++) {
+                                if (attributeNames[i] !== 'style') {
+                                    let new_key = attributeNames[i].indexOf('data-') != -1 ? attributeNames[i].replace('data-', '') : attributeNames[i];
+                                    customAttributes[new_key] = entry.target.getAttribute(attributeNames[i]);
+                                    if (!self.BurialPoint[new_key]) {
+                                        self.BurialPoint[new_key] = [entry.target.getAttribute(attributeNames[i])];
+                                    } else {
+                                        self.BurialPoint[new_key].push(entry.target.getAttribute(attributeNames[i]));
+                                    }
+                                }
+                            };
+                        }
+                        self.BurialPoint.res_detail.push(customAttributes);
+                        //收集的数据加到上报数组中
+                        self.indexReportedArr.push(index);
+                        // //收集到该元素后，取消对该元素dom的观察
+                        self._observer.unobserve(entry.target);
+                        //超过一定量打点，打点会删除这一批
+                        if (self.site_num.length >= self.maxNum) {
+                            self.data.ExposureCallback(self.BurialPoint)
+                            self.site_num.splice(0, self.maxNum);
+                            self.BurialPoint.res_detail.splice(0, self.maxNum);
+                            for (var i = 0; i < attributeNames.length; i++) {
+                                if (attributeNames[i] !== 'style') {
+                                    let new_key = attributeNames[i].indexOf('data-') != -1 ? attributeNames[i].replace('data-', '') : attributeNames[i];
+                                    self.BurialPoint[new_key].splice(0, self.maxNum);
+                                }
+                            }
+                        } else {
+                            if (self.site_num.length > 0) {
+                                //只要有新的alias添加进来，接下来如果没有增加，自动1s后打
+                                self._timer = window.setTimeout(function () {
+                                    if (self.site_num.length > 0) { // 防止同页面清除数据后，定时器还没执行，就执行了打点
+                                        self.data.ExposureCallback(self.BurialPoint);
+                                        self.site_num.splice(0, self.maxNum);
+                                        self.BurialPoint.res_detail.splice(0, self.maxNum);
+                                        for (var i = 0; i < attributeNames.length; i++) {
+                                            if (attributeNames[i] !== 'style') {
+                                                let new_key = attributeNames[i].indexOf('data-') != -1 ? attributeNames[i].replace('data-', '') : attributeNames[i];
+                                                self.BurialPoint[new_key].splice(0, self.maxNum);
+                                            }
+                                        }
+                                    }
+                                }, 1000)
+                            }
+                        }
+                    } else if (self.indexReportedArr.indexOf(index) == -1 && cardType == '5') {
+                        self.indexReportedArr.push(index);
+                    }
+                }
+            }, {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.1 // 不一定非得全部露出来  这个阈值可以小一点点
+            })
+        }), { threshold: 0.1 })
+    }
+    add(entry) {
+        this._observer && this._observer.observe(entry.el)
+    }
+
+    // 清理曝光数据
+    waterfallRender() {
+        // 清除记录数据时检查下 是否包含已曝光数据，如有曝光数据，先曝光后清理记录数据
+        if (typeof this.data.ExposureCallback === 'function' && this.site_num.length > 0) {
+            clearTimeout(this._timer);
+            this.data.ExposureCallback(this.BurialPoint);
+        }
+        // 二次加载后清除之前记录数据
+        this.indexReportedArr = [];
+        this.site_num.splice(0, this.maxNum);
+        // 埋点参数
+        this.BurialPoint = {
+            res_detail: []
+        };
+    }
+    handleImageError() {
+        // 使用 MutationObserver 监听新增的图片元素
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === 1) { // 元素节点
+                        // 查找新增节点中的所有图片
+                        const images = node.querySelectorAll ? node.querySelectorAll('img') : [];
+                        images.forEach((img) => {
+                            img.addEventListener('error', function() {
+                                this.remove(); // 删除加载失败的图片
+                            }, { once: true }); // 只执行一次
+                        });
+                        // 如果新增节点本身就是图片
+                        if (node.tagName === 'IMG') {
+                            node.addEventListener('error', function() {
+                                this.remove();
+                            }, { once: true });
+                        }
+                    }
+                });
+            });
+        });
+
+        // 监听容器的子节点变化
+        if (this.container) {
+            observer.observe(this.container, {
+                childList: true,
+                subtree: true
+            });
+        }
+
+        // 为已存在的图片绑定错误处理
+        const existingImages = this.container.querySelectorAll('img');
+        existingImages.forEach(function(img) {
+            img.addEventListener('error', function() {
+                this.remove();
+            }, { once: true });
+        });
+    }
+
+}
+
+// 支持 ESM / CommonJS / 浏览器全局变量
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = VirtualImageLayout;
+} else if (typeof define === 'function' && define.amd) {
+    define(function () { return VirtualImageLayout; });
+} else if (typeof window !== 'undefined') {
+    window.VirtualImageLayout = VirtualImageLayout;
+}
+

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "virtual-image-layout",
+  "version": "1.0.0",
+  "description": "A virtual scrolling justified image gallery layout library, framework-agnostic",
+  "main": "js/index.js",
+  "module": "js/index.js",
+  "author": "lukuihao <351973031@qq.com>",
+  "keywords": ["virtual-scroll", "image-layout", "justified-gallery", "waterfall"],
+  "license": "MIT",
+  "files": [
+    "js/index.js",
+    "css/index.css"
+  ],
+  "scripts": {
+    "build": "echo 'No build step required'"
+  }
+}