virtual-image-layout 1.0.5 → 1.0.7

package/README.md

@@ -1,6 +1,6 @@
-# 图片瀑布流布局 - 虚拟列表
+# 图片等高布局 - 虚拟列表
 
-一个基于虚拟列表技术的高性能图片瀑布流布局项目，支持大量图片的流畅展示。
+一个基于虚拟列表技术的高性能图片等高布局项目，支持大量图片的流畅展示。
 
 ## 功能特性
 

package/package.json

@@ -1,20 +1,32 @@
 {
   "name": "virtual-image-layout",
-  "version": "1.0.5",
-  "description": "A virtual scrolling justified image gallery layout library, framework-agnostic",
+  "version": "1.0.7",
+  "description": "A virtual scrolling image gallery layout library, framework-agnostic. Includes justified/equal-height layout and waterfall layout.",
   "main": "js/index.js",
   "module": "js/index.js",
+  "exports": {
+    ".": "./js/index.js",
+    "./waterfall": "./waterfall/waterfall.js",
+    "./WaterFall.vue": "./waterfall/WaterFall.vue",
+    "./css/index.css": "./css/index.css",
+    "./waterfall/index.css": "./waterfall/index.css"
+  },
   "author": "lukuihao <351973031@qq.com>",
   "keywords": [
     "virtual-scroll",
     "image-layout",
     "justified-gallery",
-    "waterfall"
+    "waterfall",
+    "masonry",
+    "vue"
   ],
   "license": "MIT",
   "files": [
     "js/index.js",
-    "css/index.css"
+    "css/index.css",
+    "waterfall/waterfall.js",
+    "waterfall/WaterFall.vue",
+    "waterfall/index.css"
   ],
   "scripts": {
     "build": "echo 'No build step required'"

package/waterfall/WaterFall.vue

@@ -0,0 +1,404 @@
+<template>
+  <ul ref="scrollerRef" class="waterfall"></ul>
+</template>
+
+<script>
+export default {
+  name: 'WaterFall',
+  props: {
+    // 列间距（px）
+    spacing: {
+      type: Number,
+      default: 16,
+    },
+    // 标题额外高度（px）
+    titleGap: {
+      type: Number,
+      default: 0,
+    },
+    // 自定义渲染函数，返回 HTML 字符串
+    onRenderItem: {
+      type: Function,
+      required: true,
+    },
+    // 曝光回调
+    onExposure: {
+      type: Function,
+      default: null,
+    },
+  },
+
+  data() {
+    return {
+      listData: [],
+      itemIncontainer: {},
+      allList_h: 0,
+      maxColumn: 16,
+      seeHeight: 0,
+      spacing_top: 0,
+      // 曝光相关
+      site_num: [],
+      BurialPoint: { res_detail: [] },
+      indexReportedArr: [],
+      maxNum: 30,
+      _observer: null,
+      _timer: null,
+      _resizeTimer: null,
+      _scrollTimer: null,
+    };
+  },
+
+  mounted() {
+    this.seeHeight = window.innerHeight;
+    this.spacing_top = this.$refs.scrollerRef.getBoundingClientRect().top + window.scrollY;
+
+    if (typeof this.onExposure === 'function') {
+      this._initObserver();
+    }
+
+    window.addEventListener('scroll', this._onScroll);
+    window.addEventListener('resize', this._onResize);
+  },
+
+  beforeUnmount() {
+    window.removeEventListener('scroll', this._onScroll);
+    window.removeEventListener('resize', this._onResize);
+    if (this._observer) this._observer.disconnect();
+    clearTimeout(this._timer);
+    clearTimeout(this._resizeTimer);
+    clearTimeout(this._scrollTimer);
+  },
+
+  methods: {
+    // ── 公开方法 ──────────────────────────────────────
+
+    // 添加图片数据
+    addImages(data) {
+      this.listData.push(...data);
+      const el = this.$refs.scrollerRef;
+      if (el && el.querySelectorAll('li').length !== 0) {
+        this._setPosition();
+        this._drawVirtualRows();
+      } else {
+        this._calculationListData();
+      }
+    },
+
+    // 清空重置
+    reset() {
+      if (typeof this.onExposure === 'function' && this.site_num.length > 0) {
+        clearTimeout(this._timer);
+        this.onExposure(this.BurialPoint);
+      }
+      this.listData = [];
+      this.itemIncontainer = {};
+      this.allList_h = 0;
+      this.site_num = [];
+      this.indexReportedArr = [];
+      this.BurialPoint = { res_detail: [] };
+      const el = this.$refs.scrollerRef;
+      if (el) {
+        el.innerHTML = '';
+        el.removeAttribute('style');
+      }
+    },
+
+    // ── 私有方法 ──────────────────────────────────────
+
+    _onScroll() {
+      if (!this.listData.length) return;
+      clearTimeout(this._scrollTimer);
+      this._scrollTimer = setTimeout(() => this._drawVirtualRows(), 100);
+    },
+
+    _onResize() {
+      if (!this.listData.length) return;
+      clearTimeout(this._resizeTimer);
+      this._resizeTimer = setTimeout(() => this._resizeWaterFall(), 500);
+    },
+
+    _getContainerWidth() {
+      const el = this.$refs.scrollerRef;
+      return el ? el.offsetWidth : 0;
+    },
+
+    _calculateProductWidth() {
+      const containerWith = this._getContainerWidth();
+      const spacing = this.spacing;
+      let itemNum = 0;
+      let _width = 0;
+      if (containerWith < 600) {
+        itemNum = 2;
+        _width = (containerWith - spacing) / 2;
+      } else if (containerWith < 800) {
+        itemNum = Math.floor((containerWith + spacing) / (200 + spacing));
+        _width = (containerWith - spacing * (itemNum - 1)) / itemNum;
+      } else if (containerWith < 1700) {
+        itemNum = Math.floor((containerWith + spacing) / (240 + spacing));
+        _width = (containerWith - spacing * (itemNum - 1)) / itemNum;
+      } else if (containerWith < 1900) {
+        itemNum = Math.floor((containerWith + spacing) / (260 + spacing));
+        _width = (containerWith - spacing * (itemNum - 1)) / itemNum;
+      } else {
+        itemNum = Math.floor((containerWith + spacing) / (280 + spacing));
+        _width = (containerWith - spacing * (itemNum - 1)) / itemNum;
+      }
+      return { itemsPerRow: itemNum, width: _width };
+    },
+
+    _getCols() {
+      return this._calculateProductWidth().itemsPerRow;
+    },
+
+    _getScaledHeight(originalWidth, originalHeight, newWidth) {
+      const scaleRatio = newWidth / originalWidth;
+      return { width: newWidth, height: Math.round(originalHeight * scaleRatio) };
+    },
+
+    _getShort(heightArr) {
+      let index = 0;
+      let min = heightArr[0];
+      for (let i = 0; i < heightArr.length; i++) {
+        if (min > heightArr[i]) { min = heightArr[i]; index = i; }
+      }
+      return index;
+    },
+
+    _setPosition() {
+      if (!this.listData.length) return;
+      const result = this._calculateProductWidth();
+      const cols = result.itemsPerRow;
+      const heightArr = [];
+      let totleSnm = 0;
+      let waterfallHeight = 500;
+
+      this.listData.forEach((item, index) => {
+        if (item.width == 0 || item.height == 0) { item.width = 4000; item.height = 3000; }
+        item.data_index = index + 1;
+        const item_w = result.width;
+        const scaledSize = this._getScaledHeight(item.width, item.height, item_w);
+        item.count_height = scaledSize.height + this.titleGap;
+        item.img_height = scaledSize.height;
+        item.item_width = item_w;
+
+        if (index < cols) {
+          heightArr.push(item.count_height);
+          item.top = 0;
+          item.left = index * (item_w + this.maxColumn);
+        } else {
+          const _index = this._getShort(heightArr);
+          const min = Math.min(...heightArr);
+          item.top = min + this.maxColumn;
+          item.left = _index * (item_w + this.maxColumn);
+          heightArr[_index] += item.count_height + this.maxColumn;
+          waterfallHeight = Math.max(...heightArr);
+        }
+        totleSnm += item.count_height + this.maxColumn;
+      });
+
+      this.allList_h = Math.floor(totleSnm / this.listData.length);
+      const el = this.$refs.scrollerRef;
+      if (el) el.style.height = waterfallHeight + 'px';
+    },
+
+    _calculationListData() {
+      this._setPosition();
+      for (let i = 0; i < this.listData.length; i++) {
+        this._insert(this.listData[i], i);
+      }
+    },
+
+    _resizeWaterFall() {
+      if (!this.listData.length) return;
+      const result = this._calculateProductWidth();
+      const cols = result.itemsPerRow;
+      const heightArr = [];
+      let totleSnm = 0;
+      let waterfallHeight = 500;
+      const el = this.$refs.scrollerRef;
+
+      this.listData.forEach((item, index) => {
+        const item_w = result.width;
+        const scaledSize = this._getScaledHeight(item.width, item.height, item_w);
+        item.count_height = scaledSize.height + this.titleGap;
+        item.img_height = scaledSize.height;
+        item.item_width = item_w;
+
+        if (index < cols) {
+          heightArr.push(item.count_height);
+          item.top = 0;
+          item.left = index * (item_w + this.maxColumn);
+        } else {
+          const _index = this._getShort(heightArr);
+          const min = Math.min(...heightArr);
+          item.top = min + this.maxColumn;
+          item.left = _index * (item_w + this.maxColumn);
+          heightArr[_index] += item.count_height + this.maxColumn;
+          waterfallHeight = Math.max(...heightArr);
+        }
+        totleSnm += item.count_height + this.maxColumn;
+
+        if (el) {
+          const li = el.querySelector(`li[data-index="${item.data_index}"]`);
+          if (li) {
+            li.style.transform = `translate(${item.left}px,${item.top}px)`;
+            li.style.width = item_w + 'px';
+            const boxImg = li.querySelector('.box-images');
+            if (boxImg) boxImg.style.height = item.img_height + 'px';
+          }
+        }
+      });
+
+      this.allList_h = Math.floor(totleSnm / this.listData.length);
+      if (el) el.style.height = waterfallHeight + 'px';
+      this._drawVirtualRows();
+    },
+
+    _insert(value, index) {
+      this.itemIncontainer[index] = { index };
+      const el = this.$refs.scrollerRef;
+      if (!el) return;
+      el.insertAdjacentHTML('beforeend', this.onRenderItem(value));
+      if (typeof this.onExposure === 'function') {
+        if (this.indexReportedArr.indexOf(value.data_index + '') === -1) {
+          const li = el.querySelector(`li[data-index="${value.data_index}"]`);
+          if (li) this._observeItem(li);
+        }
+      }
+    },
+
+    _removeItem(rows) {
+      const el = this.$refs.scrollerRef;
+      rows.forEach((item) => {
+        const data_index = parseInt(item) + 1;
+        if (el) {
+          const li = el.querySelector(`li[data-index="${data_index}"]`);
+          if (li) li.remove();
+        }
+        delete this.itemIncontainer[item];
+      });
+    },
+
+    _drawVirtualRows() {
+      if (!this.listData.length) return;
+      let topPixel = window.scrollY - this.spacing_top;
+      topPixel = topPixel < 0 ? 0 : topPixel;
+      const bottomPixel = topPixel + this.seeHeight;
+      const bufferZone = this.seeHeight * 2;
+      let firstRow = Math.floor((topPixel - bufferZone) / this.allList_h) * this._getCols();
+      let lastRow = Math.ceil((bottomPixel + bufferZone) / this.allList_h) * this._getCols();
+      firstRow = Math.max(0, firstRow);
+      this._ensureRowsRendered(firstRow, lastRow);
+    },
+
+    _ensureRowsRendered(start, finish) {
+      const rowsIndex = Object.keys(this.itemIncontainer);
+      const needToRemove = [...rowsIndex];
+      for (let rowIndex = start; rowIndex <= finish; rowIndex++) {
+        const rowIndexStr = rowIndex.toString();
+        const idx = needToRemove.indexOf(rowIndexStr);
+        if (idx > -1) { needToRemove.splice(idx, 1); continue; }
+        if (this.listData.length > rowIndex && rowIndex >= 0) {
+          this._insert(this.listData[rowIndex], rowIndex);
+        }
+      }
+      this._removeItem(needToRemove);
+    },
+
+    // ── 曝光观察 ──────────────────────────────────────
+
+    _initObserver() {
+      this._observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (!entry.isIntersecting) return;
+          const { index } = entry.target.dataset;
+          if (this.indexReportedArr.indexOf(index) !== -1) return;
+          clearTimeout(this._timer);
+          this.site_num.push(index);
+          const attributeNames = Array.from(entry.target.attributes).map(a => a.name);
+          const customAttributes = {};
+          attributeNames.forEach(name => {
+            if (name === 'style') return;
+            const key = name.startsWith('data-') ? name.replace('data-', '') : name;
+            customAttributes[key] = entry.target.getAttribute(name);
+            if (!this.BurialPoint[key]) {
+              this.BurialPoint[key] = [entry.target.getAttribute(name)];
+            } else {
+              this.BurialPoint[key].push(entry.target.getAttribute(name));
+            }
+          });
+          this.BurialPoint.res_detail.push(customAttributes);
+          this.indexReportedArr.push(index);
+          this._observer.unobserve(entry.target);
+
+          if (this.site_num.length >= this.maxNum) {
+            this.onExposure(this.BurialPoint);
+            this.site_num.splice(0, this.maxNum);
+            this.BurialPoint.res_detail.splice(0, this.maxNum);
+          } else {
+            this._timer = setTimeout(() => {
+              if (this.site_num.length > 0) {
+                this.onExposure(this.BurialPoint);
+                this.site_num.splice(0, this.maxNum);
+                this.BurialPoint.res_detail.splice(0, this.maxNum);
+              }
+            }, 1000);
+          }
+        });
+      }, { threshold: 0.1 });
+    },
+
+    _observeItem(el) {
+      if (this._observer) this._observer.observe(el);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.waterfall {
+  position: relative;
+  min-height: 250px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+:deep(.waterfall li) {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 1;
+  transition: transform 0.3s ease;
+  list-style-type: none;
+}
+
+:deep(.waterfall li .box-images) {
+  display: block;
+  position: relative;
+  background: rgba(17, 17, 17, 0.04);
+  border-radius: 8px;
+  width: 100%;
+  line-height: 1;
+  overflow: hidden;
+}
+
+:deep(.waterfall li .box-images::after) {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.04);
+  border-radius: 12px;
+}
+
+:deep(.waterfall li img) {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 8px;
+  margin: auto;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+</style>

package/waterfall/index.css

@@ -0,0 +1,74 @@
+.waterfall {
+    position: relative;
+    min-height: 250px;
+    padding: 0;
+}
+
+.waterfall li {
+    box-sizing: border-box;
+    position: absolute;
+    top: 0;
+    left: 0;
+    visibility: visible;
+    pointer-events: auto;
+    line-height: 1;
+    transition: top .3s ease;
+    list-style-type: none
+}
+
+.waterfall li[data-res_type="5"] .box-images::after {
+    background: rgba(0, 0, 0, .02);
+}
+
+.waterfall li .box-images {
+    display: block;
+    position: relative;
+    background: rgba(17, 17, 17, 0.04);
+    border-radius: 8px;
+    width: 100%;
+    line-height: 1;
+    overflow: hidden;
+}
+
+.waterfall li .box-images::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background: rgba(0, 0, 0, .04);
+    border-radius: 12px;
+}
+
+.waterfall li:hover .case-name-display,
+.waterfall li:hover .list-model-collect,
+.waterfall li:hover .not-like-search,
+.waterfall li:hover .action-container .item-actions,
+.waterfall li:hover .suspended-material-name {
+    opacity: 1;
+}
+
+.waterfall li:hover .leftTop-floating {
+    display: none;
+}
+
+.waterfall li.select-mask-collect .list-model-collect,
+.waterfall li.select-mask-collect .not-like-search,
+.waterfall li.select-mask-collect .action-container .item-actions {
+    opacity: 1;
+}
+
+.waterfall li.select-mask-collect .leftTop-floating {
+    display: none;
+}
+
+.waterfall li img {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 8px;
+    margin: auto;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}

package/waterfall/waterfall.js

@@ -0,0 +1,318 @@
+/*
+    瀑布流虚拟列表核心类（无 jQuery 依赖）
+    用法：
+        const layout = new WaterFall({
+            element: document.getElementById('waterfall'), // 或 DOM 元素
+            spacing: 16,
+            titleGap: 0,
+            onRenderItem: (item) => `<li ...>...</li>`,
+            onExposure: (burialPoint) => {},
+        });
+        layout.addImages(list);
+        layout.reset();
+        layout.destroy();
+*/
+class WaterFall {
+    constructor(param) {
+        if (typeof param.element === 'string') {
+            this.scroller = document.querySelector(param.element);
+        } else if (param.element instanceof HTMLElement) {
+            this.scroller = param.element;
+        }
+        if (!this.scroller) throw new Error('[WaterFall] element not found');
+
+        this.spacing = param.spacing ?? 16;
+        this.titleGap = param.titleGap ?? 0;
+        this.onRenderItem = param.onRenderItem;
+        this.onExposure = typeof param.onExposure === 'function' ? param.onExposure : null;
+
+        this.listData = [];
+        this.itemIncontainer = {};
+        this.allList_h = 0;
+        this.maxColumn = 16;
+        this.seeHeight = window.innerHeight;
+        this.spacing_top = this.scroller.getBoundingClientRect().top + window.scrollY;
+
+        // 曝光相关
+        this.site_num = [];
+        this.BurialPoint = { res_detail: [] };
+        this.indexReportedArr = [];
+        this.maxNum = 30;
+        this._observer = null;
+        this._timer = null;
+
+        if (this.onExposure) this._initObserver();
+
+        this._onScroll = this._debounce(() => this._drawVirtualRows(), 100);
+        this._onResize = this._debounce(() => this._resizeWaterFall(), 500);
+        window.addEventListener('scroll', this._onScroll);
+        window.addEventListener('resize', this._onResize);
+    }
+
+    // ── 公开方法 ──────────────────────────────────────
+
+    addImages(data) {
+        this.listData.push(...data);
+        if (this.scroller.querySelectorAll('li').length !== 0) {
+            this._setPosition();
+            this._drawVirtualRows();
+        } else {
+            this._calculationListData();
+        }
+    }
+
+    reset() {
+        if (this.onExposure && this.site_num.length > 0) {
+            clearTimeout(this._timer);
+            this.onExposure(this.BurialPoint);
+        }
+        this.listData = [];
+        this.itemIncontainer = {};
+        this.allList_h = 0;
+        this.site_num = [];
+        this.indexReportedArr = [];
+        this.BurialPoint = { res_detail: [] };
+        this.scroller.innerHTML = '';
+        this.scroller.removeAttribute('style');
+    }
+
+    destroy() {
+        this.reset();
+        window.removeEventListener('scroll', this._onScroll);
+        window.removeEventListener('resize', this._onResize);
+        if (this._observer) this._observer.disconnect();
+    }
+
+    // ── 私有方法 ──────────────────────────────────────
+
+    _debounce(fn, wait) {
+        let timer = null;
+        return function (...args) {
+            clearTimeout(timer);
+            timer = setTimeout(() => fn.apply(this, args), wait);
+        };
+    }
+
+    _getContainerWidth() {
+        return this.scroller.offsetWidth;
+    }
+
+    _calculateProductWidth() {
+        const containerWith = this._getContainerWidth();
+        const spacing = this.spacing;
+        let itemNum = 0;
+        let _width = 0;
+        if (containerWith < 600) {
+            itemNum = 2;
+            _width = (containerWith - spacing) / 2;
+        } else if (containerWith < 800) {
+            itemNum = Math.floor((containerWith + spacing) / (200 + spacing));
+            _width = (containerWith - spacing * (itemNum - 1)) / itemNum;
+        } else if (containerWith < 1700) {
+            itemNum = Math.floor((containerWith + spacing) / (240 + spacing));
+            _width = (containerWith - spacing * (itemNum - 1)) / itemNum;
+        } else if (containerWith < 1900) {
+            itemNum = Math.floor((containerWith + spacing) / (260 + spacing));
+            _width = (containerWith - spacing * (itemNum - 1)) / itemNum;
+        } else {
+            itemNum = Math.floor((containerWith + spacing) / (280 + spacing));
+            _width = (containerWith - spacing * (itemNum - 1)) / itemNum;
+        }
+        return { itemsPerRow: itemNum, width: _width };
+    }
+
+    _getCols() {
+        return this._calculateProductWidth().itemsPerRow;
+    }
+
+    _getScaledHeight(originalWidth, originalHeight, newWidth) {
+        return { width: newWidth, height: Math.round((originalHeight / originalWidth) * newWidth) };
+    }
+
+    _getShort(heightArr) {
+        let index = 0;
+        let min = heightArr[0];
+        for (let i = 0; i < heightArr.length; i++) {
+            if (heightArr[i] < min) { min = heightArr[i]; index = i; }
+        }
+        return index;
+    }
+
+    _setPosition() {
+        if (!this.listData.length) return;
+        const result = this._calculateProductWidth();
+        const cols = result.itemsPerRow;
+        const heightArr = [];
+        let totleSnm = 0;
+        let waterfallHeight = 500;
+
+        this.listData.forEach((item, index) => {
+            if (!item.width || !item.height) { item.width = 4000; item.height = 3000; }
+            item.data_index = index + 1;
+            const item_w = result.width;
+            const scaled = this._getScaledHeight(item.width, item.height, item_w);
+            item.count_height = scaled.height + this.titleGap;
+            item.img_height = scaled.height;
+            item.item_width = item_w;
+
+            if (index < cols) {
+                heightArr.push(item.count_height);
+                item.top = 0;
+                item.left = index * (item_w + this.maxColumn);
+            } else {
+                const _index = this._getShort(heightArr);
+                item.top = Math.min(...heightArr) + this.maxColumn;
+                item.left = _index * (item_w + this.maxColumn);
+                heightArr[_index] += item.count_height + this.maxColumn;
+                waterfallHeight = Math.max(...heightArr);
+            }
+            totleSnm += item.count_height + this.maxColumn;
+        });
+
+        this.allList_h = Math.floor(totleSnm / this.listData.length);
+        this.scroller.style.height = waterfallHeight + 'px';
+    }
+
+    _calculationListData() {
+        this._setPosition();
+        for (let i = 0; i < this.listData.length; i++) {
+            this._insert(this.listData[i], i);
+        }
+    }
+
+    _resizeWaterFall() {
+        if (!this.listData.length) return;
+        const result = this._calculateProductWidth();
+        const cols = result.itemsPerRow;
+        const heightArr = [];
+        let totleSnm = 0;
+        let waterfallHeight = 500;
+
+        this.listData.forEach((item, index) => {
+            const item_w = result.width;
+            const scaled = this._getScaledHeight(item.width, item.height, item_w);
+            item.count_height = scaled.height + this.titleGap;
+            item.img_height = scaled.height;
+            item.item_width = item_w;
+
+            if (index < cols) {
+                heightArr.push(item.count_height);
+                item.top = 0;
+                item.left = index * (item_w + this.maxColumn);
+            } else {
+                const _index = this._getShort(heightArr);
+                item.top = Math.min(...heightArr) + this.maxColumn;
+                item.left = _index * (item_w + this.maxColumn);
+                heightArr[_index] += item.count_height + this.maxColumn;
+                waterfallHeight = Math.max(...heightArr);
+            }
+            totleSnm += item.count_height + this.maxColumn;
+
+            const li = this.scroller.querySelector(`li[data-index="${item.data_index}"]`);
+            if (li) {
+                li.style.transform = `translate(${item.left}px,${item.top}px)`;
+                li.style.width = item_w + 'px';
+                const box = li.querySelector('.box-images');
+                if (box) box.style.height = item.img_height + 'px';
+            }
+        });
+
+        this.allList_h = Math.floor(totleSnm / this.listData.length);
+        this.scroller.style.height = waterfallHeight + 'px';
+        this._drawVirtualRows();
+    }
+
+    _insert(value, index) {
+        this.itemIncontainer[index] = { index };
+        this.scroller.insertAdjacentHTML('beforeend', this.onRenderItem(value));
+        if (this.onExposure && this.indexReportedArr.indexOf(value.data_index + '') === -1) {
+            const li = this.scroller.querySelector(`li[data-index="${value.data_index}"]`);
+            if (li) this._observer && this._observer.observe(li);
+        }
+    }
+
+    _removeItem(rows) {
+        rows.forEach(item => {
+            const li = this.scroller.querySelector(`li[data-index="${parseInt(item) + 1}"]`);
+            if (li) li.remove();
+            delete this.itemIncontainer[item];
+        });
+    }
+
+    _drawVirtualRows() {
+        if (!this.listData.length) return;
+        let topPixel = window.scrollY - this.spacing_top;
+        topPixel = topPixel < 0 ? 0 : topPixel;
+        const bottomPixel = topPixel + this.seeHeight;
+        const bufferZone = this.seeHeight * 2;
+        let firstRow = Math.floor((topPixel - bufferZone) / this.allList_h) * this._getCols();
+        let lastRow = Math.ceil((bottomPixel + bufferZone) / this.allList_h) * this._getCols();
+        firstRow = Math.max(0, firstRow);
+        this._ensureRowsRendered(firstRow, lastRow);
+    }
+
+    _ensureRowsRendered(start, finish) {
+        const rowsIndex = Object.keys(this.itemIncontainer);
+        const needToRemove = [...rowsIndex];
+        for (let rowIndex = start; rowIndex <= finish; rowIndex++) {
+            const str = rowIndex.toString();
+            const idx = needToRemove.indexOf(str);
+            if (idx > -1) { needToRemove.splice(idx, 1); continue; }
+            if (rowIndex >= 0 && rowIndex < this.listData.length) {
+                this._insert(this.listData[rowIndex], rowIndex);
+            }
+        }
+        this._removeItem(needToRemove);
+    }
+
+    _initObserver() {
+        this._observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (!entry.isIntersecting) return;
+                const { index } = entry.target.dataset;
+                if (this.indexReportedArr.indexOf(index) !== -1) return;
+                clearTimeout(this._timer);
+                this.site_num.push(index);
+
+                const attributeNames = Array.from(entry.target.attributes).map(a => a.name);
+                const customAttributes = {};
+                attributeNames.forEach(name => {
+                    if (name === 'style') return;
+                    const key = name.startsWith('data-') ? name.replace('data-', '') : name;
+                    customAttributes[key] = entry.target.getAttribute(name);
+                    if (!this.BurialPoint[key]) {
+                        this.BurialPoint[key] = [customAttributes[key]];
+                    } else {
+                        this.BurialPoint[key].push(customAttributes[key]);
+                    }
+                });
+                this.BurialPoint.res_detail.push(customAttributes);
+                this.indexReportedArr.push(index);
+                this._observer.unobserve(entry.target);
+
+                const flush = () => {
+                    this.onExposure(this.BurialPoint);
+                    this.site_num.splice(0, this.maxNum);
+                    this.BurialPoint.res_detail.splice(0, this.maxNum);
+                };
+
+                if (this.site_num.length >= this.maxNum) {
+                    flush();
+                } else {
+                    this._timer = setTimeout(() => {
+                        if (this.site_num.length > 0) flush();
+                    }, 1000);
+                }
+            });
+        }, { threshold: 0.1 });
+    }
+}
+
+// UMD 导出
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = WaterFall;
+} else if (typeof define === 'function' && define.amd) {
+    define(function () { return WaterFall; });
+} else if (typeof window !== 'undefined') {
+    window.WaterFall = WaterFall;
+}