comments

+<div class="comments-title clearfix">
+    <div class="avatar-list">
+        <img src="" alt="">
+        <img src="" alt="">
+        <img src="" alt="">
+    </div>
+    <div class="agree">210人点赞</div>
+    <div class="seenum">9213人看过</div>
+</div>
+<div class="comments-num"><span>评论2</span></div>
+<div class="comments-list clearfix">
+    <div class="avatar">
+        <img src="" alt="">
+    </div>
+    <div class="info-box">
+        <div class="info-top">
+            <div>
+                <span class="username">缺心眼子</span>
+                <span class="info-right"> 
+                    <span class="iconfont">&#xe601;</span>
+                    <span>313</span>
+                </span>
+            </div>
+            <div class="time"><span>4分钟前</span></div>
+        </div>
+        <div class="info-bottom"></div>
+    </div>
+</div>

+/*
+ * @Author: Targaryen
+ * @Date: 2017-05-25 14:36:33
+ * @Last Modified by: Targaryen
+ * @Last Modified time: 2017-05-25 15:28:52
+ */
+const $ = require('yoho-jquery');
+const qs = window.queryString;
+const article_id = qs.id || $('.detail').data('id');
+const $comments = $('#comments');
+
+let page = 0;
+let beforeScroll = document.body.scrollTop; // 滚动前位置记录
+let onLoading = false; // 是否正在加载
+
+/**
+ * 异步加载评论
+ */
+const getComments = () => {
+    if (!onLoading) {
+        onLoading = true;
+    } else {
+        return false;
+    }
+
+    $.ajax({
+        type: 'get',
+        url: '//guang.m.yohobuy.com/guang/info/getComments',
+        data: {
+            article_id: article_id,
+            page: page++
+        },
+        success: function(result) {
+            $comments.append(result);
+            onLoading = false;
+        }
+    });
+};
+
+/**
+ * 当scroll到1/2$goodsContainer高度后继续请求下一页数据
+ */
+const scrollHandler = function() {
+    if ($(window).scrollTop() > $comments.height() * 0.6) {
+        getComments();
+    }
+};
+
+/**
+ * 滚动加载
+ */
+$(window).scroll(function() {
+    setTimeout(function() {
+        let afterScroll = document.body.scrollTop;
+
+        if (afterScroll - beforeScroll > 0) {
+            window.requestAnimationFrame(scrollHandler);
+            beforeScroll = afterScroll;
+        } else {
+            return false;
+        }
+    }, 5);
+});
+
+getComments();

+/*
+ * @Author: Targaryen
+ * @Date: 2017-05-25 15:49:46
+ * @Last Modified by: Targaryen
+ * @Last Modified time: 2017-05-25 16:07:12
+ */
+
+.guang-detail-page .comments {
+    padding: 0 30px;
+    margin-top: 30px;
+
+    .comments-title {
+        color: #444;
+
+        .avatar-list {
+            float: left;
+
+            img {
+                width: 70px;
+                height: 70px;
+                border-radius: 35px;
+            }
+        }
+
+        .agree {
+            float: left;
+        }
+
+        .seenum {
+            float: right;
+        }
+    }
+
+    .comments-num > span {
+        float: left;
+        color: #b0b0b0;
+    }
+
+    .comments-list {
+        .avatar {
+            float: left;
+            width: 70px;
+            margin-right: 30px;
+        }
+
+        .info-box > .info-top > .title {
+            font-size: 16px;
+            color: #b0b0b0;
+        }
+    }
+}