照片墙滚动加载

source/_posts/前端杂烩/博客部署调整记录.md

@@ -15,7 +15,7 @@ categories:
 2. hexo clean && hexo generate
 3. 图片与对象存储仓库同步
 4. 生成的html文件的压缩
-5. public目录中所有内容的拷贝发布
+5. public目录中所有文件的拷贝发布
 
 因为不想把主题和内容过多整合, 这样会导致将来更换主题困难
 所以计划是把2 3 4 5步骤在构建过程中一键完成
@@ -58,9 +58,10 @@ try {
 */
 ```
 上面的写法就如同是在命令行执行`hexo clean && hexo generate`
-正好gulp配置任务的时候也需要返回Promise对象( 下面会提到 ), 正好能结合, 不需要二次封装了, 不错
+正好gulp配置任务的时候也需要返回Promise对象( 下面会提到 ), 可以直接结合, 不需要二次封装了, 不错
 
 ### gulp
+![gulp](/images/前端杂烩/gulp-2x.png)
 之前没用过这个前端构建工具, 因为跟webpack的作用有不少的重合, 前端实在学不完
 这里使用一下它的任务自动管理的功能, 整体的体验挺好
 

source/photo_wall/index.md

@@ -4,4 +4,4 @@ date: 2018-5-24 10:05:28
 pageid: PhotoWall
 ---
 
-<div id="photo-wall"></div>
+<div id="photo-wall"></div><div id="load-top">正在加载ԅ( ¯་། ¯ԅ)</div>

themes/yilia/source-src/css/article-inner.scss

@@ -99,7 +99,7 @@
       content: "";
       width: 6px;
       height: 6px;
-      border: 1px solid #999;
+      border: 1px solid $color9;
       border-radius: 10px;
       background: #aaa;
       display: inline-block;

themes/yilia/source-src/css/left.scss

@@ -35,7 +35,7 @@
 		}
 		.header-subtitle{
 			text-align: center;
-			color:#999;
+			color:$color9;
 			font-size: 14px;
 			line-height: 25px;
 			overflow: hidden;

themes/yilia/source-src/css/mobile-slider.scss

@@ -20,7 +20,7 @@
 }
 .header-subtitle {
     text-align: center;
-    color: #999;
+    color: $color9;
     font-size: 14px;
     line-height: 25px;
     overflow: hidden;

themes/yilia/source-src/css/page/photo-wall.scss

@@ -19,3 +19,8 @@
     vertical-align: middle;
   }
 }
+#load-top {
+  color: $color9;
+  text-align: center;
+  display: none;
+}

themes/yilia/source-src/js/aside.js

@@ -1,7 +1,7 @@
 var backTop = function (domE, ctn, distance) {
   if (!domE) return;
   var timer = null;
-  var _onscroll = window.onscroll,
+  var _onscroll = (ctn || window).onscroll,
     _onclick = domE.onclick;
   (ctn || window).onscroll = throttle(function () {
     typeof _onscroll === 'function' && _onscroll.apply(this, arguments);
@@ -9,7 +9,6 @@ var backTop = function (domE, ctn, distance) {
   }, 100);
   domE.onclick = function () {
     typeof _onclick === 'function' && _onclick.apply(this, arguments);
-    var baseCt = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop;
     timer = setInterval(function () { //设置一个计时器
       var ct = ctn.scrollTop || document.documentElement.scrollTop || document.body.scrollTop; //获取距离顶部的距离
       var diff = Math.max(10, ct / 6);

themes/yilia/source-src/js/comment.js

@@ -9,7 +9,7 @@ window.AV = require('leancloud-storage')
 // 评论配置
 const commentConfig = require("../config/comment.json")
 
-import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then(({ default: Valine }) => {
+import(/* webpackChunkName: "valine" */ '../lib/Valine.min').then((: Valine }) => {
   commentConfig.valine.config.path = window.location.pathname
   // commentConfig.valine.config.av = AV
   new Valine(commentConfig.valine.config)

themes/yilia/source-src/js/main.js

@@ -12,15 +12,17 @@ import Util from './util'
 Util.addLoadEvent(function() {
 	Share.init()
 	// Viewer.init()
-	Aside.init()
+  Aside.init()
+  if(window.themeConfig.pageid === 'PhotoWall') {
+    // 自定义的照片墙页面
+    import(/* webpackChunkName: "photo-wall" */ './photo-wall').then(PhotoWall => {
+      // PhotoWall.default.init()
+    })
+  }
 })
+
 const commentConfig = require("../config/comment.json")
 if(window.themeConfig.isPost && commentConfig.valine.enable) {
   // 文章详情页面, 并且启用了评论, 则加载评论相关代码
   import(/* webpackChunkName: "comment" */ './comment')
-}
-
-if(window.themeConfig.pageid === 'PhotoWall') {
-  // 自定义的照片墙页面
-  import(/* webpackChunkName: "photo-wall" */ './photo-wall')
 }

themes/yilia/source-src/js/photo-wall.js

@@ -1,36 +1,70 @@
 import axios from 'axios'
 
-var groupid = 1, currentIndex = 0
+var groupid = 1, currentIndex = 0, defaultStep = 20, scrollLock = false
 
-function loadMore(step) {
+// 滚动区域DOM
+const scrollDom = document.getElementById('container')
+// 作为底部标记的DOM
+const markDom = document.getElementById('footer')
+// 加载提示文字
+const loadTip = document.getElementById('load-top')
+
+function loadMoreItems(step) {
+  scrollLock = true //加载过程中锁定滚动加载
+  loadTip.style.display = 'block'
   // 滚动到底部时调用
   axios.get(`${themeConfig.pictureCdn}/photo-wall/${groupid}/list.json`).then(res => {
     var itemContainer = document.createElement('div')
     var imgItems = '', index = currentIndex
     for( ; index<currentIndex+step && index<res.data.files.length ; index++) {
-      imgItems += `
-      <div class="item">
+      imgItems += `<div class="item">
           <img class="item-img" src="${themeConfig.pictureCdn}/${res.data.files[index].name}" alt=""/>
-      </div>
-      `
+      </div>`
     }
     if(index >= res.data.files.length) { // 已到达当前分组列表的末尾
       groupid++
       if(index<currentIndex+step) { // 如果加载的数据数量不足步长
         // 则需要再加载下一个分组, 下一个分组需要加载的图片数量是剩余的步长
-        loadMore(currentIndex + step - index) 
+        loadMoreItems(currentIndex + step - index) 
       }
     } else {
       currentIndex = index
     }
-    itemContainer.classList.add('item-container')
-    itemContainer.innerHTML = imgItems
+    itemContainer.insertAdjacentHTML('beforeend', imgItems)
     document.getElementById('photo-wall').appendChild(itemContainer)
+    loadTip.style.display = 'none'
+    setTimeout(()=>{
+      scrollLock = false
+    }, 2000)
   }).catch(res => { // 未加载到文件列表, 代表已经没有更多图片
-    // TODO 显示已没有更多内容
-    // console.log(res)
+    scrollLock = true
+    loadTip.textContent = '没有更多图片啦/(ㄒoㄒ)/~~'
   })
 }
-loadMore(20)
 
-//TODO 在滚动到底部时调用loadMore
+
+//检测是否具备滚动条加载数据块的条件
+function checkScrollSlide(){
+  var scrollH = scrollDom.scrollTop || document.body.scrollTop || document.documentElement.scrollTop
+  var clientHeight = document.body.clientHeight || document.documentElement.clientHeight
+  var footerOffetTop = markDom.offsetTop
+  return scrollH + clientHeight > footerOffetTop
+}
+
+function init() {
+  var _onscroll = scrollDom.onscroll
+  var timer = null
+  scrollDom.onscroll = function () {
+    typeof _onscroll === 'function' && _onscroll.apply(this, arguments)
+    if(scrollLock) return
+    if(timer) clearTimeout(timer)
+    timer = setTimeout(()=>{
+      if(checkScrollSlide()) {
+        loadMoreItems(defaultStep)
+      }
+      timer = null
+    }, 200)
+  }
+  loadMoreItems(defaultStep)
+}
+export default { init }