virtual-image-layout 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -55
- package/css/index.css +0 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,40 +14,108 @@
|
|
|
14
14
|
## 技术栈
|
|
15
15
|
|
|
16
16
|
- **原生 JavaScript**：核心布局算法
|
|
17
|
-
- **jQuery**：DOM 操作和事件处理
|
|
18
17
|
- **CSS3**：样式和动画效果
|
|
19
18
|
- **IntersectionObserver API**：图片曝光监听
|
|
20
19
|
|
|
21
|
-
## 项目结构
|
|
22
|
-
|
|
23
|
-
```
|
|
24
|
-
├── css/
|
|
25
|
-
│ └── index.css # 样式文件
|
|
26
|
-
├── js/
|
|
27
|
-
│ ├── index.js # 虚拟列表核心类 (VirtualImageLayout)
|
|
28
|
-
│ ├── list.js # 页面逻辑和数据渲染
|
|
29
|
-
│ └── data.js # 图片数据
|
|
30
|
-
├── image-layout.html # 主页面
|
|
31
|
-
└── README.md # 项目文档
|
|
32
|
-
```
|
|
33
|
-
|
|
34
20
|
## 快速开始
|
|
35
21
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
```
|
|
39
|
-
|
|
40
|
-
|
|
22
|
+
npm i virtual-image-layout
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<template>
|
|
26
|
+
<div class="virtual-layout-wrapper">
|
|
27
|
+
<div ref="containerRef" class="justified-gallery"></div>
|
|
28
|
+
<div v-if="loading" class="load-more-waterfall wave-loading">
|
|
29
|
+
<span style="--time:1"></span>
|
|
30
|
+
<span style="--time:2"></span>
|
|
31
|
+
<span style="--time:3"></span>
|
|
32
|
+
</div>
|
|
33
|
+
<div v-if="noMore" class="load-more-waterfall">
|
|
34
|
+
<p class="tips-text2">已经到底了噢～</p>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
41
38
|
```
|
|
42
39
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
40
|
+
```javascript
|
|
41
|
+
import VirtualImageLayout from 'virtual-image-layout';
|
|
42
|
+
import 'virtual-image-layout/css/index.css';
|
|
43
|
+
export default {
|
|
44
|
+
name: 'ListDome',
|
|
45
|
+
data() {
|
|
46
|
+
return {
|
|
47
|
+
layout: null,
|
|
48
|
+
page: 1,
|
|
49
|
+
loading: false,
|
|
50
|
+
noMore: false,
|
|
51
|
+
hasMore: true,
|
|
52
|
+
};
|
|
53
|
+
},
|
|
54
|
+
mounted() {
|
|
55
|
+
this.layout = new VirtualImageLayout(this.$refs.containerRef, {
|
|
56
|
+
rowGap: 16,
|
|
57
|
+
onRenderItem: (item, imgWidth, imgHeight) => {
|
|
58
|
+
return `
|
|
59
|
+
<div class="images-gallery" data-index="${item.data_index}">
|
|
60
|
+
<a class="images" style="width:${imgWidth}px;height:${imgHeight}px;">
|
|
61
|
+
<img src="${item.img}" alt="${item.res_name || ''}">
|
|
62
|
+
</a>
|
|
63
|
+
<a class="name">${item.res_name || ''}</a>
|
|
64
|
+
</div>
|
|
65
|
+
`;
|
|
66
|
+
},
|
|
67
|
+
ExposureCallback: (burialPoint) => {
|
|
68
|
+
console.log('曝光数据:', burialPoint);
|
|
69
|
+
},
|
|
70
|
+
});
|
|
71
|
+
|
|
72
|
+
// 监听滚动加载更多
|
|
73
|
+
window.addEventListener('scroll', this.onScroll);
|
|
74
|
+
this.loadMore();
|
|
75
|
+
},
|
|
76
|
+
beforeUnmount() {
|
|
77
|
+
window.removeEventListener('scroll', this.onScroll);
|
|
78
|
+
this.layout = null;
|
|
79
|
+
},
|
|
80
|
+
methods: {
|
|
81
|
+
onScroll() {
|
|
82
|
+
const scrollTop = window.pageYOffset;
|
|
83
|
+
const totalHeight = document.documentElement.scrollHeight;
|
|
84
|
+
const viewHeight = window.innerHeight;
|
|
85
|
+
if (scrollTop + viewHeight + 500 > totalHeight && this.hasMore && !this.loading) {
|
|
86
|
+
this.loadMore();
|
|
87
|
+
}
|
|
88
|
+
},
|
|
89
|
+
async loadMore() {
|
|
90
|
+
this.loading = true;
|
|
91
|
+
// TODO: 替换成你的真实接口
|
|
92
|
+
const list = await this.fetchData(this.page);
|
|
93
|
+
this.loading = false;
|
|
94
|
+
if (list.length === 0) {
|
|
95
|
+
this.hasMore = false;
|
|
96
|
+
this.noMore = true;
|
|
97
|
+
if (this.layout) this.layout.hasMore = false;
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
this.layout && this.layout.addImages(list);
|
|
101
|
+
this.page++;
|
|
102
|
+
},
|
|
103
|
+
fetchData() {
|
|
104
|
+
// 模拟接口，替换成真实请求
|
|
105
|
+
return Promise.resolve([
|
|
106
|
+
{
|
|
107
|
+
"res_name": "现代别墅外观3D模型",
|
|
108
|
+
"img": "https://placehold.co/400x300/png",
|
|
109
|
+
"width": 400,
|
|
110
|
+
"height": 300
|
|
111
|
+
},
|
|
112
|
+
]);
|
|
113
|
+
},
|
|
114
|
+
},
|
|
115
|
+
};
|
|
116
|
+
```
|
|
46
117
|
|
|
47
118
|
## 使用说明
|
|
48
|
-
|
|
49
|
-
### 基本用法
|
|
50
|
-
|
|
51
119
|
```javascript
|
|
52
120
|
// 初始化虚拟列表
|
|
53
121
|
var layout = new VirtualImageLayout('container', {
|
|
@@ -76,20 +144,6 @@ var layout = new VirtualImageLayout('container', {
|
|
|
76
144
|
layout.addImages(imageData);
|
|
77
145
|
```
|
|
78
146
|
|
|
79
|
-
### 数据格式
|
|
80
|
-
|
|
81
|
-
```javascript
|
|
82
|
-
var jsonData = [
|
|
83
|
-
{
|
|
84
|
-
"res_name": "图片标题",
|
|
85
|
-
"img": "https://example.com/image.jpg",
|
|
86
|
-
"width": 1920,
|
|
87
|
-
"height": 1080
|
|
88
|
-
},
|
|
89
|
-
// 更多图片...
|
|
90
|
-
];
|
|
91
|
-
```
|
|
92
|
-
|
|
93
147
|
## 核心类说明
|
|
94
148
|
|
|
95
149
|
### VirtualImageLayout
|
|
@@ -132,22 +186,6 @@ var jsonData = [
|
|
|
132
186
|
- Safari
|
|
133
187
|
- Edge
|
|
134
188
|
|
|
135
|
-
需要支持 ES6+ 和 IntersectionObserver API。
|
|
136
|
-
|
|
137
|
-
## 开发说明
|
|
138
|
-
|
|
139
|
-
### 修改样式
|
|
140
|
-
|
|
141
|
-
编辑 `css/index.css` 文件来自定义样式。
|
|
142
|
-
|
|
143
|
-
### 修改数据
|
|
144
|
-
|
|
145
|
-
编辑 `js/data.js` 文件来修改图片数据。
|
|
146
|
-
|
|
147
|
-
### 自定义渲染
|
|
148
|
-
|
|
149
|
-
在 `js/list.js` 中修改 `onRenderItem` 函数来自定义图片卡片的渲染方式。
|
|
150
|
-
|
|
151
189
|
## 注意事项
|
|
152
190
|
|
|
153
191
|
1. 图片数据必须包含 `width` 和 `height` 字段
|
package/css/index.css
CHANGED
|
@@ -1,18 +1,3 @@
|
|
|
1
|
-
* {
|
|
2
|
-
margin: 0;
|
|
3
|
-
padding: 0;
|
|
4
|
-
box-sizing: border-box;
|
|
5
|
-
}
|
|
6
|
-
|
|
7
|
-
body {
|
|
8
|
-
font-family: Arial, sans-serif;
|
|
9
|
-
background-color: #f5f5f5;
|
|
10
|
-
padding:50px;
|
|
11
|
-
}
|
|
12
|
-
/* .list-page{
|
|
13
|
-
padding-left: 108px;
|
|
14
|
-
} */
|
|
15
|
-
|
|
16
1
|
.justified-gallery {
|
|
17
2
|
padding-bottom: 0;
|
|
18
3
|
margin: 0;
|