diff --git a/projects/infiniteLoad/chenyulin/.vscode/launch.json b/projects/infiniteLoad/chenyulin/.vscode/launch.json
new file mode 100644
index 0000000..00742d3
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/.vscode/launch.json
@@ -0,0 +1,14 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "node",
+ "request": "launch",
+ "name": "启动程序",
+ "program": "${file}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/projects/infiniteLoad/chenyulin/README.md b/projects/infiniteLoad/chenyulin/README.md
new file mode 100644
index 0000000..f6a0424
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/README.md
@@ -0,0 +1,5 @@
+# 无限加载组件
+
+- 前端模板为 template.js，在 html 的 script 标签里面，可以在这里定制专属内容
+- 基础样式部分写在 css/infinite.css 文件里，可以在这里定制样式
+- config.json 为传入前端的展示数据
diff --git a/projects/infiniteLoad/chenyulin/config.json b/projects/infiniteLoad/chenyulin/config.json
new file mode 100644
index 0000000..a2dc423
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/config.json
@@ -0,0 +1,20 @@
+{
+ "data": [
+ {
+ "id": "hhh1",
+ "index": 0,
+ "title": "我是标题，要短",
+ "desc": "我是描述，我很长。",
+ "pic": "./assets/3.png",
+ "date": ""
+ },
+ {
+ "id": "hhh2",
+ "index": 0,
+ "title": "我是标题，要短",
+ "desc": "我是描述，我很长。",
+ "pic": "./assets/2.png",
+ "date": ""
+ }
+ ]
+}
\ No newline at end of file
diff --git a/projects/infiniteLoad/chenyulin/infinite.js b/projects/infiniteLoad/chenyulin/infinite.js
new file mode 100644
index 0000000..b3e884b
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/infinite.js
@@ -0,0 +1,32 @@
+/**
+ * mock数据用
+ */
+const serve = require('koa-static')
+const Koa = require('koa')
+const app = new Koa()
+const myjson = require('./config.json')
+
+function rnd(n, m) {
+ return Math.floor(Math.random() * (m - n) + n)
+}
+
+app.use(function*(next) {
+ if (this.req.url == '/load') {
+ this.body = myjson
+ } else {
+ yield next
+ }
+})
+
+// $ GET /package.json
+app.use(serve('.'))
+
+// // $ GET /1.html
+// app.use(serve('www'))
+
+// or use absolute paths
+app.use(serve(__dirname + '/www'))
+
+app.listen(3000)
+
+console.log('listening on port 3000')
diff --git a/projects/infiniteLoad/chenyulin/package-lock.json b/projects/infiniteLoad/chenyulin/package-lock.json
new file mode 100644
index 0000000..a3230e5
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/package-lock.json
@@ -0,0 +1,329 @@
+{
+ "name": "endless-loading",
+ "version": "1.0.0",
+ "lockfileVersion": 1,
+ "requires": true,
+ "dependencies": {
+ "accepts": {
+ "version": "1.3.5",
+ "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
+ "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=",
+ "requires": {
+ "mime-types": "2.1.18",
+ "negotiator": "0.6.1"
+ }
+ },
+ "any-promise": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+ "integrity": "sha1-q8av7tzqUugJzcA3au0845Y10X8="
+ },
+ "co": {
+ "version": "4.6.0",
+ "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+ "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ="
+ },
+ "content-disposition": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
+ "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ="
+ },
+ "content-type": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+ "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+ },
+ "cookies": {
+ "version": "0.7.1",
+ "resolved": "https://registry.npmjs.org/cookies/-/cookies-0.7.1.tgz",
+ "integrity": "sha1-fIphX1SBxhq58WyDNzG8uPZjuZs=",
+ "requires": {
+ "depd": "1.1.2",
+ "keygrip": "1.0.2"
+ }
+ },
+ "debug": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
+ "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+ "requires": {
+ "ms": "2.0.0"
+ }
+ },
+ "deep-equal": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+ "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU="
+ },
+ "delegates": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+ "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
+ },
+ "depd": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+ "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+ },
+ "destroy": {
+ "version": "1.0.4",
+ "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+ "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+ },
+ "ee-first": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+ },
+ "error-inject": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/error-inject/-/error-inject-1.0.0.tgz",
+ "integrity": "sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc="
+ },
+ "escape-html": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+ "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+ },
+ "fresh": {
+ "version": "0.5.2",
+ "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+ "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+ },
+ "http-assert": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/http-assert/-/http-assert-1.3.0.tgz",
+ "integrity": "sha1-oxpc+IyHPsu1eWkH1NbxMujAHko=",
+ "requires": {
+ "deep-equal": "1.0.1",
+ "http-errors": "1.6.3"
+ }
+ },
+ "http-errors": {
+ "version": "1.6.3",
+ "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
+ "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=",
+ "requires": {
+ "depd": "1.1.2",
+ "inherits": "2.0.3",
+ "setprototypeof": "1.1.0",
+ "statuses": "1.5.0"
+ }
+ },
+ "inherits": {
+ "version": "2.0.3",
+ "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+ "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+ },
+ "is-generator-function": {
+ "version": "1.0.7",
+ "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.7.tgz",
+ "integrity": "sha512-YZc5EwyO4f2kWCax7oegfuSr9mFz1ZvieNYBEjmukLxgXfBUbxAWGVF7GZf0zidYtoBl3WvC07YK0wT76a+Rtw=="
+ },
+ "keygrip": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/keygrip/-/keygrip-1.0.2.tgz",
+ "integrity": "sha1-rTKXxVcGneqLz+ek+kkbdcXd65E="
+ },
+ "koa": {
+ "version": "2.5.1",
+ "resolved": "https://registry.npmjs.org/koa/-/koa-2.5.1.tgz",
+ "integrity": "sha512-cchwbMeG2dv3E2xTAmheDAuvR53tPgJZN/Hf1h7bTzJLSPcFZp8/t5+bNKJ6GaQZoydhZQ+1GNruhKdj3lIrug==",
+ "requires": {
+ "accepts": "1.3.5",
+ "content-disposition": "0.5.2",
+ "content-type": "1.0.4",
+ "cookies": "0.7.1",
+ "debug": "3.1.0",
+ "delegates": "1.0.0",
+ "depd": "1.1.2",
+ "destroy": "1.0.4",
+ "error-inject": "1.0.0",
+ "escape-html": "1.0.3",
+ "fresh": "0.5.2",
+ "http-assert": "1.3.0",
+ "http-errors": "1.6.3",
+ "is-generator-function": "1.0.7",
+ "koa-compose": "4.1.0",
+ "koa-convert": "1.2.0",
+ "koa-is-json": "1.0.0",
+ "mime-types": "2.1.18",
+ "on-finished": "2.3.0",
+ "only": "0.0.2",
+ "parseurl": "1.3.2",
+ "statuses": "1.5.0",
+ "type-is": "1.6.16",
+ "vary": "1.1.2"
+ }
+ },
+ "koa-compose": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-4.1.0.tgz",
+ "integrity": "sha512-8ODW8TrDuMYvXRwra/Kh7/rJo9BtOfPc6qO8eAfC80CnCvSjSl0bkRM24X6/XBBEyj0v1nRUQ1LyOy3dbqOWXw=="
+ },
+ "koa-convert": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/koa-convert/-/koa-convert-1.2.0.tgz",
+ "integrity": "sha1-2kCHXfSd4FOQmNFwC1CCDOvNIdA=",
+ "requires": {
+ "co": "4.6.0",
+ "koa-compose": "3.2.1"
+ },
+ "dependencies": {
+ "koa-compose": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/koa-compose/-/koa-compose-3.2.1.tgz",
+ "integrity": "sha1-qFzLQLfZhtjlo0Wzoazo6rz1Tec=",
+ "requires": {
+ "any-promise": "1.3.0"
+ }
+ }
+ }
+ },
+ "koa-is-json": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/koa-is-json/-/koa-is-json-1.0.0.tgz",
+ "integrity": "sha1-JzwH7c3Ljfaiwat9We52SRRR7BQ="
+ },
+ "koa-send": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/koa-send/-/koa-send-5.0.0.tgz",
+ "integrity": "sha512-90ZotV7t0p3uN9sRwW2D484rAaKIsD8tAVtypw/aBU+ryfV+fR2xrcAwhI8Wl6WRkojLUs/cB9SBSCuIb+IanQ==",
+ "requires": {
+ "debug": "3.1.0",
+ "http-errors": "1.6.3",
+ "mz": "2.7.0",
+ "resolve-path": "1.4.0"
+ }
+ },
+ "koa-static": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/koa-static/-/koa-static-5.0.0.tgz",
+ "integrity": "sha512-UqyYyH5YEXaJrf9S8E23GoJFQZXkBVJ9zYYMPGz919MSX1KuvAcycIuS0ci150HCoPf4XQVhQ84Qf8xRPWxFaQ==",
+ "requires": {
+ "debug": "3.1.0",
+ "koa-send": "5.0.0"
+ }
+ },
+ "media-typer": {
+ "version": "0.3.0",
+ "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+ "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+ },
+ "mime-db": {
+ "version": "1.33.0",
+ "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+ "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ=="
+ },
+ "mime-types": {
+ "version": "2.1.18",
+ "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+ "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
+ "requires": {
+ "mime-db": "1.33.0"
+ }
+ },
+ "ms": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+ "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+ },
+ "mz": {
+ "version": "2.7.0",
+ "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+ "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+ "requires": {
+ "any-promise": "1.3.0",
+ "object-assign": "4.1.1",
+ "thenify-all": "1.6.0"
+ }
+ },
+ "negotiator": {
+ "version": "0.6.1",
+ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
+ "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
+ },
+ "object-assign": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+ "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+ },
+ "on-finished": {
+ "version": "2.3.0",
+ "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+ "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+ "requires": {
+ "ee-first": "1.1.1"
+ }
+ },
+ "only": {
+ "version": "0.0.2",
+ "resolved": "https://registry.npmjs.org/only/-/only-0.0.2.tgz",
+ "integrity": "sha1-Kv3oTQPlC5qO3EROMGEKcCle37Q="
+ },
+ "parseurl": {
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz",
+ "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M="
+ },
+ "path-is-absolute": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+ "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+ },
+ "resolve-path": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/resolve-path/-/resolve-path-1.4.0.tgz",
+ "integrity": "sha1-xL2p9e+y/OZSR4c6s2u02DT+Fvc=",
+ "requires": {
+ "http-errors": "1.6.3",
+ "path-is-absolute": "1.0.1"
+ }
+ },
+ "setprototypeof": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz",
+ "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
+ },
+ "statuses": {
+ "version": "1.5.0",
+ "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+ "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+ },
+ "template_js": {
+ "version": "0.7.1-1",
+ "resolved": "https://registry.npmjs.org/template_js/-/template_js-0.7.1-1.tgz",
+ "integrity": "sha512-ayCxgG3RH8rvnpmTJgvq0O3s07pE99NzxUTtqq964CTTWyYyxuEDeJdwtyHNmpvxKpdOvz/jkGfxCSLQbhe3Yw=="
+ },
+ "thenify": {
+ "version": "3.3.0",
+ "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.0.tgz",
+ "integrity": "sha1-5p44obq+lpsBCCB5eLn2K4hgSDk=",
+ "requires": {
+ "any-promise": "1.3.0"
+ }
+ },
+ "thenify-all": {
+ "version": "1.6.0",
+ "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+ "integrity": "sha1-GhkY1ALY/D+Y+/I02wvMjMEOlyY=",
+ "requires": {
+ "thenify": "3.3.0"
+ }
+ },
+ "type-is": {
+ "version": "1.6.16",
+ "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
+ "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
+ "requires": {
+ "media-typer": "0.3.0",
+ "mime-types": "2.1.18"
+ }
+ },
+ "vary": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+ "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+ }
+ }
+}
diff --git a/projects/infiniteLoad/chenyulin/package.json b/projects/infiniteLoad/chenyulin/package.json
new file mode 100644
index 0000000..df65ac6
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "endless-loading",
+ "version": "1.0.0",
+ "description": "",
+ "main": "1.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "",
+ "license": "ISC",
+ "dependencies": {
+ "koa": "^2.5.1",
+ "koa-static": "^5.0.0",
+ "template_js": "^0.7.1-1"
+ }
+}
diff --git a/projects/infiniteLoad/chenyulin/www/assets/2.png b/projects/infiniteLoad/chenyulin/www/assets/2.png
new file mode 100644
index 0000000..c9ccfe2
Binary files /dev/null and b/projects/infiniteLoad/chenyulin/www/assets/2.png differ
diff --git a/projects/infiniteLoad/chenyulin/www/assets/3.png b/projects/infiniteLoad/chenyulin/www/assets/3.png
new file mode 100644
index 0000000..81f1a22
Binary files /dev/null and b/projects/infiniteLoad/chenyulin/www/assets/3.png differ
diff --git a/projects/infiniteLoad/chenyulin/www/css/infinite.css b/projects/infiniteLoad/chenyulin/www/css/infinite.css
new file mode 100644
index 0000000..cc09eef
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/www/css/infinite.css
@@ -0,0 +1,29 @@
+body {
+ margin: 0;
+ font-size: 30px;
+}
+ul {
+ width: 100%;
+ padding:0
+}
+li {
+ list-style: none;
+ display: flex;
+}
+
+.writer {
+ display: flex;
+ flex-direction: column;
+}
+.writer span,
+.writer strong {
+ display: block;
+ /* flex: 1; */
+}
+/* .slide {
+ box-shadow: 0 0 10px 10px #000;
+} */
+#loadingLi{
+ font-size: 30px;
+ text-align: center;
+}
diff --git a/projects/infiniteLoad/chenyulin/www/example.html b/projects/infiniteLoad/chenyulin/www/example.html
new file mode 100644
index 0000000..a398b2f
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/www/example.html
@@ -0,0 +1,56 @@
+
+
+
+
+
+ 无限加载
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/projects/infiniteLoad/chenyulin/www/infiniteLoader.js b/projects/infiniteLoad/chenyulin/www/infiniteLoader.js
new file mode 100644
index 0000000..ee3e18b
--- /dev/null
+++ b/projects/infiniteLoad/chenyulin/www/infiniteLoader.js
@@ -0,0 +1,185 @@
+;(function(win, doc) {
+ let defaultSettings = {
+ container: '#tpl',
+ myinterface: '/load',
+ dataList: '',
+ loadingContainer: '#result',
+ loadingContent: "加载中...
",
+ loadingID: '#loadingLi'
+ }
+
+ function infiniteLoader(options) {
+ let self = this
+ if (!options) {
+ throw new Error('请传入配置参数')
+ }
+ self = Object.assign(self, defaultSettings, options)
+ self.container =
+ doc.querySelector(self.container) || doc.querySelectorAll(self.container)
+ self.loadingContainer =
+ doc.querySelector(self.loadingContainer) ||
+ doc.querySelectorAll(self.loadingContainer)
+ self.myLoad()
+ }
+
+ infiniteLoader.prototype = {
+ myLoad: function() {
+ let self = this
+ let fetching = false
+ let page = 1
+ let slideCache = []
+ let lastScrollY = window.pageYOffset
+ let scrollY = window.pageYOffset
+ let innerHeight
+ let topViewPort
+ let bottomViewPort
+ let idflag = 0
+ function isVisible(id) {
+ let offTop
+ let offsetHeight
+ let data
+ let node
+
+ // 设置该节点，并且设置节点属性：node，offTop，offsetHeight
+ node = document.getElementById(id)
+ // offsetHeight是自身元素的高度
+ offsetHeight = parseInt(node.offsetHeight)
+ // 元素的上外缘距离最近采用定位父元素内壁的距离
+ offTop = parseInt(node.offsetTop)
+
+ if (offTop + offsetHeight > topViewPort && offTop < bottomViewPort) {
+ return true
+ } else {
+ return false
+ }
+ }
+
+ /**
+ * 更新DOM缓存
+ **/
+ function updateItemCache(node) {
+ let list = node.querySelectorAll('.slide')
+ let len = list.length
+ slideCache = []
+ let obj
+ for (let i = 0; i < len; i++) {
+ obj = {
+ node: list[i],
+ img: list[i].querySelector('.img')
+ }
+ obj.img.src = obj.img.getAttribute('data-src')
+ slideCache.push(obj)
+ }
+ }
+
+ /**
+ * 动态加载内容
+ **/
+ function fetchContent() {
+ if (self.loadingContainer) {
+ let Loading = document.querySelector(self.loadingID)
+ if (!Loading) {
+ let result = self.loadingContainer
+ result.innerHTML = self.loadingContent
+ }
+ }
+ if (fetching) {
+ return
+ } else {
+ fetching = true
+ }
+ // 如果用数据接口的方式获取数据
+ if (self.myinterface) {
+ axios
+ .get(self.myinterface)
+ .then(function(result) {
+ let dataList = result.data.data
+ let len = dataList.length
+ let ulContainer = document.getElementById('expList')
+ let frag = document.createElement('div')
+ frag.setAttribute('id', idflag++)
+ frag.setAttribute('class', 'father')
+
+ let tpl = self.container.innerHTML
+ frag.innerHTML = template(tpl, { dataList })
+ ulContainer.appendChild(frag)
+
+ // 更新缓存
+ updateItemCache(frag)
+ // 已经拉去完毕，设置标识为true
+ fetching = false
+ // 强制触发
+ handleScroll(null, true)
+ page++
+ })
+ .catch(function(error) {
+ console.log(error)
+ })
+ }
+ }
+
+ /**
+ * 懒加载实现
+ **/
+ function handleDefer() {
+ // 获取dom缓存
+ let list = slideCache
+ // 对于遍历list里的每一项，都使用一个变量，而不是在循环内部声明。节省内存，把性能高效，做到极致。
+ let thisImg
+ for (let i = 0, len = list.length; i < len; i++) {
+ thisImg = list[i].img
+
+ let deferSrc = list[i].img.src
+ if (isVisible(list[i].node.parentNode.id)) {
+ // 这个函数是图片onload逻辑
+ let handler = function() {
+ if (thisImg) {
+ }
+ let node = thisImg
+ let src = deferSrc
+ return function() {
+ node.src = src
+ node.style.opacity = 1
+ }
+ }
+ let img = new Image()
+ img.onload = handler()
+ img.src = list[i].img.src
+ }
+ }
+ }
+
+ /**
+ * 处理滚动
+ **/
+ function handleScroll(e, force) {
+ // 如果时间间隔内，没有发生滚动，且并未强制触发加载，则do nothing，再次间隔100毫秒之后查询
+ if (!force && lastScrollY === window.scrollY) {
+ window.setTimeout(handleScroll, 100)
+ return
+ } else {
+ // 更新文档滚动位置
+ lastScrollY = window.scrollY
+ }
+ scrollY = window.scrollY
+ // 浏览器窗口的视口（viewport）高度赋值
+ innerHeight = window.innerHeight
+ // 计算isVisible上下阈值
+ topViewPort = scrollY - 1000
+ bottomViewPort = scrollY + innerHeight + 600
+
+ // 判断是否需要加载
+ // document.body.offsetHeight;返回当前网页高度
+ if (window.scrollY + innerHeight + 200 > document.body.offsetHeight) {
+ fetchContent()
+ }
+ // 实现懒加载
+ handleDefer()
+ window.setTimeout(handleScroll, 100)
+ }
+ window.setTimeout(handleScroll, 100)
+ fetchContent()
+ }
+ }
+ win.infiniteLoader = infiniteLoader
+})(window, document)
diff --git a/projects/lottery/chenyulin/.gitignore b/projects/lottery/chenyulin/.gitignore
new file mode 100644
index 0000000..5f99b9b
--- /dev/null
+++ b/projects/lottery/chenyulin/.gitignore
@@ -0,0 +1,3 @@
+.DS_Store
+node_modules/
+build/
diff --git a/projects/lottery/chenyulin/.prettierignore b/projects/lottery/chenyulin/.prettierignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/projects/lottery/chenyulin/.prettierignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/projects/lottery/chenyulin/.prettierrc b/projects/lottery/chenyulin/.prettierrc
new file mode 100644
index 0000000..a822f83
--- /dev/null
+++ b/projects/lottery/chenyulin/.prettierrc
@@ -0,0 +1,25 @@
+{
+ "printWidth": 80,
+ "tabWidth": 2,
+ "useTabs": false,
+ "semi": false,
+ "parser": "babylon",
+ "singleQuote": true,
+ "trailingComma": "none",
+ "bracketSpacing": true,
+ "jsxBracketSameLine": false,
+ "overrides": [
+ {
+ "files": ".prettierrc",
+ "options": { "parser": "json", "trailingComma": "none" }
+ },
+ {
+ "files": ".babelrc",
+ "options": { "parser": "json", "trailingComma": "none" }
+ },
+ {
+ "files": "*.json",
+ "options": { "trailingComma": "none" }
+ }
+ ]
+}
diff --git a/projects/lottery/chenyulin/LICENSE b/projects/lottery/chenyulin/LICENSE
new file mode 100644
index 0000000..e0c64ad
--- /dev/null
+++ b/projects/lottery/chenyulin/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2016 fe-boilerplate
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/projects/lottery/chenyulin/README.md b/projects/lottery/chenyulin/README.md
new file mode 100644
index 0000000..489b848
--- /dev/null
+++ b/projects/lottery/chenyulin/README.md
@@ -0,0 +1,200 @@
+# lottery
+
+A basic FE project.
+
+> psm: xx.xx.xx
+
+### 0.0 线上入口
+
+- http://???
+
+### 0.1 相关人员
+
+负责人
+
+| 角色 | 人员 |
+| -------- | ----------- |
+| 产品经理 | xxx,yyy |
+| 前端开发 | xxx |
+| 后台开发 | xxx,yyy,zzz |
+| 交互设计 | xxx,yyy |
+
+### 0.2 需求 & 设计图
+
+* [需求文档](xxx)
+* [设计图](xxx)
+
+----
+
+## 1. 如何运行
+
+### 1.0 安装依赖
+
+```sh
+
+# 安装 node
+$ brew install node
+
+# 安装 fe
+$ npm i fe -g
+
+# 安装 yarn (可选)
+$ npm i yarn -g
+```
+
+> node 版本 [8.0+]
+
+严格使用 [prettier](https://prettier.io/), 请基于自己的编辑器配置 [Editor Support](https://prettier.io/docs/en/editors.html)
+
+### 1.1 开发环境配置
+
+#### 1.1.1 项目配置
+
+`fe.json`
+
+示例:
+
+```json
+{
+ "CLIENT_DIR": "client",
+ "ENTRY_FILE": "index.js",
+ "CLIENT_MODE": "vue"
+}
+```
+
+参考完整配置: https://code.byted.org/fe/fe/blob/master/config/fe.json
+
+#### 1.1.2 生产环境配置
+
+所有生产环境变量请在 `.env` 中配置
+
+```yaml
+## .env
+
+# production | development
+NODE_ENV=production
+SERVER_PORT=4000
+SERVER_IP=127.0.0.1
+CORS_ORIGIN=*
+CORS_METHODS=GET,HEAD,PUT,PATCH,POST,DELETE
+```
+
+### 1.2 开发过程
+
+工作流
+
+`fe dev` > `fe build` > `fe start`
+
+升级依赖
+
+```sh
+# 查看更新版本
+$ yarn outdated
+# 安全升级
+$ yarn update
+# 升级到 latest
+$ yarn upgrade --latest
+```
+
+#### 1.2.1 命令
+
+```sh
+$ cd lottery
+
+# 开发
+$ fe dev
+
+# 编译
+$ fe build
+
+# 在生产环境启动(自动编译)
+$ fe start
+```
+
+#### 1.2.2 代理配置
+
+`config/proxy.config.js`
+
+```js
+// Proxies for devServer
+// usage @see http-proxy-middleware
+module.exports = (config, runtime) => {
+ const dev = process.env.NODE_ENV !== 'production'
+
+ // Only in dev mode
+ // For production use `app.use(proxy)` in business modules
+ dev &&
+ Object.assign(config, {
+ '/__api': {
+ target: 'http://localhost:3000',
+ pathRewrite: { '^/__api': '/api' }
+ }
+ })
+ return config
+}
+```
+
+#### 1.2.3 自定义 postcss
+
+`config/postcss.config.js`
+
+```js
+module.exports = (config, runtime) => {
+ config.plugins = config.plugins.concat([
+ // require('postcss-write-svg')({
+ // utf8: false
+ // }),
+ require('postcss-px-to-viewport')({
+ viewportWidth: 750,
+ viewportHeight: 1334,
+ unitPrecision: 3,
+ viewportUnit: 'vw',
+ selectorBlackList: ['.nvw', '.hairlines'],
+ minPixelValue: 1,
+ mediaQuery: false
+ }),
+ require('postcss-viewport-units')()
+ // require('cssnano')({
+ // preset: 'advanced',
+ // autoprefixer: false,
+ // 'postcss-zindex': false
+ // })
+ ])
+ return config
+}
+```
+
+> 注意: 使用的插件请安装并保存到 `package.json`
+
+#### 1.2.4 自定义 polyfills
+
+`config/polyfills.js`
+
+默认已集成:
+
+- Promise
+- fetch
+- Object.assign
+- vh|vw|vmin|vmax
+
+#### 1.2.5 自定义 nuxt
+
+`config/nuxt.config.js`
+
+示例:
+
+```js
+module.exports = (config, runtime) => {
+ return config
+}
+```
+
+参考完整配置: https://code.byted.org/fe/fe/blob/master/config/plugins/nuxt.config.js
+
+### 1.3 发布
+
+> TODO
+
+### 1.4 错误告警及监控
+
+> TODO
diff --git a/projects/lottery/chenyulin/client/assets/.gitkeep b/projects/lottery/chenyulin/client/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/projects/lottery/chenyulin/client/assets/2.png b/projects/lottery/chenyulin/client/assets/2.png
new file mode 100644
index 0000000..4552841
Binary files /dev/null and b/projects/lottery/chenyulin/client/assets/2.png differ
diff --git a/projects/lottery/chenyulin/client/assets/3.png b/projects/lottery/chenyulin/client/assets/3.png
new file mode 100644
index 0000000..5d6c7f6
Binary files /dev/null and b/projects/lottery/chenyulin/client/assets/3.png differ
diff --git a/projects/lottery/chenyulin/client/assets/global.styl b/projects/lottery/chenyulin/client/assets/global.styl
new file mode 100644
index 0000000..6c0fce1
--- /dev/null
+++ b/projects/lottery/chenyulin/client/assets/global.styl
@@ -0,0 +1,74 @@
+// 边框默认颜色
+$defaultBorderColor = rgba(0, 0, 0, .08)
+
+// retina 边框函数基础声明，不包含 border 部分，主要用于在 retina-border 函数里继承
+#retina-border-basic
+ position: relative
+ &::before
+ content: ''
+ position: absolute
+ width: 100%
+ height: 100%
+ top: 0
+ left:0
+ transform-origin: left top
+ box-sizing: border-box
+ pointer-events: none
+ @media
+ (-webkit-min-device-pixel-ratio: 2),
+ (min-resolution: 2dppx)
+ &::before
+ width: 200%
+ height: 200%
+ transform: scale(.5)
+ @media
+ (-webkit-min-device-pixel-ratio: 3),
+ (min-resolution: 3dppx)
+ &::before
+ width: 300%
+ height: 300%
+ transform: scale(1 / 3)
+
+// 设置圆角（如果圆角大于0，则添加圆角的代码）
+retina-border-radius(borderRadius)
+ if unit(borderRadius, px) > 0
+ border-radius: borderRadius
+ @media
+ (-webkit-min-device-pixel-ratio: 2),
+ (min-resolution: 2dppx)
+ &::before
+ border-radius: unit(borderRadius, px) * 2
+ @media
+ (-webkit-min-device-pixel-ratio: 3),
+ (min-resolution: 3dppx)
+ &::before
+ border-radius: unit(borderRadius, px) * 3
+
+// retina 边框函数声明
+retina-border(borderWidth = 1px, borderStyle = solid, borderColor = $defaultBorderColor,borderRadius = 0)
+ @extends #retina-border-basic
+ retina-border-radius(borderRadius)
+ &::before
+ border-width: borderWidth
+ border-style: borderStyle
+ border-color: borderColor
+
+// 全边框
+.retina-border-all
+ retina-border(1px)
+
+// 上边框
+.retina-border-top
+ retina-border(1px 0 0)
+
+// 右边框
+.retina-border-right
+ retina-border(0 1px 0 0)
+
+// 下边框
+.retina-border-bottom
+ retina-border(0 0 1px)
+
+// 左边框
+.retina-border-left
+ retina-border(0 0 0 1px)
diff --git a/projects/lottery/chenyulin/client/assets/group-2@3x.png b/projects/lottery/chenyulin/client/assets/group-2@3x.png
new file mode 100644
index 0000000..b0496c3
Binary files /dev/null and b/projects/lottery/chenyulin/client/assets/group-2@3x.png differ
diff --git a/projects/lottery/chenyulin/client/assets/helper.styl b/projects/lottery/chenyulin/client/assets/helper.styl
new file mode 100644
index 0000000..a52ef3d
--- /dev/null
+++ b/projects/lottery/chenyulin/client/assets/helper.styl
@@ -0,0 +1,50 @@
+$defaultBorderColor = rgba(0, 0, 0, .08)
+
+#retina-border-basic
+ position: relative
+ &::before
+ content: ''
+ position: absolute
+ width: 100%
+ height: 100%
+ top: 0
+ left:0
+ transform-origin: left top
+ box-sizing: border-box
+ pointer-events: none
+ @media
+ (-webkit-min-device-pixel-ratio: 2),
+ (min-resolution: 2dppx)
+ &::before
+ width: 200%
+ height: 200%
+ transform: scale(.5)
+ @media
+ (-webkit-min-device-pixel-ratio: 3),
+ (min-resolution: 3dppx)
+ &::before
+ width: 300%
+ height: 300%
+ transform: scale(1 / 3)
+
+retina-border(borderWidth = 1px, borderStyle = solid, borderColor = $defaultBorderColor)
+ @extends #retina-border-basic
+ &::before
+ border-width: borderWidth
+ border-style: borderStyle
+ border-color: borderColor
+
+// .retina-border-all
+// retina-border(1px)
+
+// .retina-border-top
+// retina-border(1px 0 0)
+
+// .retina-border-right
+// retina-border(0 1px 0 0)
+
+// .retina-border-bottom
+// retina-border(0 0 1px)
+
+// .retina-border-left
+// retina-border(0 0 0 1px)
diff --git a/projects/lottery/chenyulin/client/assets/lark.png b/projects/lottery/chenyulin/client/assets/lark.png
new file mode 100644
index 0000000..1442ad5
Binary files /dev/null and b/projects/lottery/chenyulin/client/assets/lark.png differ
diff --git a/projects/lottery/chenyulin/client/assets/reset.styl b/projects/lottery/chenyulin/client/assets/reset.styl
new file mode 100644
index 0000000..b404548
--- /dev/null
+++ b/projects/lottery/chenyulin/client/assets/reset.styl
@@ -0,0 +1,195 @@
+*
+ margin 0
+ padding 0
+
+*,
+*:before,
+*:after
+ box-sizing inherit
+ -moz-box-sizing inherit
+
+html
+ box-sizing border-box
+ -moz-box-sizing border-box
+ // use new font stack
+ // from: https://make.wordpress.org/core/2016/07/07/native-fonts-in-4-6/
+ // with "Yahei" fallback for chinese
+ // font-family -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft Yahei", "微软雅黑", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
+ font-family system-ui
+ -ms-text-size-adjust 100%
+ -webkit-text-size-adjust 100%
+
+body
+ // vertical-align baseline
+ background-color transparent
+ // -webkit-backface-visibility hidden
+
+ul,
+li,
+ol
+ list-style none
+
+fieldset,
+img,
+iframe
+ border 0
+
+a::-moz-focus-inner,
+button::-moz-focus-inner,
+input::-moz-focus-inner
+ border 0
+ margin 0
+ padding 0
+
+input::-webkit-inner-spin-button,
+input::-webkit-outer-spin-button
+ -webkit-appearance none
+ margin 0
+
+input::-webkit-search-decoration,
+input::-webkit-search-cancel-button
+ display none
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus
+input:-webkit-autofill,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus
+ -webkit-box-shadow 0 0 0px 1000px white inset
+ // -webkit-text-fill-color none
+ // transition background-color 5000s ease-in-out 0s
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section,
+summary
+ display block
+
+audio,
+canvas,
+video
+ display inline-block
+
+progress
+ vertical-align baseline
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+i,
+th,
+var
+ font-style normal
+ font-weight normal
+
+template,
+[hidden]
+ display none
+
+svg:not(:root)
+ overflow hidden
+
+caption,
+th
+ text-align left
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6
+ font-size 100%
+ font-weight normal
+
+a
+ background-color transparent
+ -webkit-text-decoration-skip objects
+ text-decoration none
+
+a:focus,
+a:hover,
+a:active,
+input:focus,
+textarea:focus
+ outline 0
+
+img
+ vertical-align middle
+ -ms-interpolation-mode bicubic
+
+table
+ font-size inherit
+ font 100%
+ border-collapse collapse
+ border-spacing 0
+
+td
+ vertical-align top
+
+th
+ text-align inherit
+
+iframe
+ display block
+
+textarea
+ resize none
+ overflow auto
+ vertical-align top
+
+button,
+input,
+select,
+textarea
+ font-size 100%
+ font inherit
+ text-transform none
+
+button,
+input
+ line-height normal
+ overflow visible
+ -webkit-appearance none
+
+button
+ cursor pointer
+
+button[disabled],
+input[disabled]
+ cursor default
+
+[type="checkbox"],
+[type="radio"]
+ padding 0
+
+abbr,
+acronym
+ border 0
+ font-variant normal
+
+b,
+strong
+ font-weight bolder
+
+code,
+kbd,
+pre,
+samp
+ font-family monospace, monospace
+ font-size 1em
diff --git a/projects/lottery/chenyulin/client/layouts/default.vue b/projects/lottery/chenyulin/client/layouts/default.vue
new file mode 100644
index 0000000..fa71714
--- /dev/null
+++ b/projects/lottery/chenyulin/client/layouts/default.vue
@@ -0,0 +1,52 @@
+
+
+
+
+
+
diff --git a/projects/lottery/chenyulin/client/pages/detail.vue b/projects/lottery/chenyulin/client/pages/detail.vue
new file mode 100644
index 0000000..14b0ea4
--- /dev/null
+++ b/projects/lottery/chenyulin/client/pages/detail.vue
@@ -0,0 +1,47 @@
+
+
+
{{hi}} {{data.hello}}
+
SSR: {{server}}
+
{{userAgent}}
+
+ box
+
+
GOTO: index / detail
+
+
+
+
+
+
+
+
+
{{result}}
+