加载更多功能和样式

@@ -17,7 +17,14 @@ exports.init = function() {
     $(function() {
     $(function() {
         var $intro = $('#intro'),
         var $intro = $('#intro'),
             $infoContent = $('#info-content'),
             $infoContent = $('#info-content'),
+            $loadMore = $('#load-more-info'),
+            $loadStatus = $loadMore.children('.status'),
+            $loading = $loadStatus.filter('.loading'),
+            $noMore = $loadStatus.filter('.no-more'),
+            loadMoreH = $loadMore.height(),
+            winH = $(window).height(),
             dataEnd = false,
             dataEnd = false,
+            canScroll = true,
             tpl;
             tpl;
 
 
         //获取相关资讯模板
         //获取相关资讯模板
@@ -58,12 +65,23 @@ exports.init = function() {
         //下拉加载更多
         //下拉加载更多
         $(window).scroll(function() {
         $(window).scroll(function() {
             var count;
             var count;
-            if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
+
+            if (!canScroll) {
+                return;
+            }
+
+            if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH) {
                 //loadData
                 //loadData
                 if (dataEnd) {
                 if (dataEnd) {
                     //下次下拉时不显示加载图片以及不加载数据
                     //下次下拉时不显示加载图片以及不加载数据
+                    $loading.addClass('hide');
+                    $noMore.removeClass('hide');
                 } else {
                 } else {
+                    $loading.removeClass('hide');
+                    $noMore.addClass('hide')
+
                     count = $infoContent.children('.info-block').length;
                     count = $infoContent.children('.info-block').length;
+                    canScroll = false;
                     $.ajax({
                     $.ajax({
                         type: 'GET',
                         type: 'GET',
                         url: '/ps/loadInfo',
                         url: '/ps/loadInfo',
@@ -90,6 +108,7 @@ exports.init = function() {
                                     container: $infoContent
                                     container: $infoContent
                                 });
                                 });
                             }
                             }
+                            canScroll = true;
                         }
                         }
                     });
                     });
                 }
                 }

-@import "compass", "compass/reset";
+@import "compass", "compass/reset", "compass/css3";
 $pxConvertRem : 40;
 $pxConvertRem : 40;
 
 
 body {
 body {
@@ -11,7 +11,7 @@ ol, ul {
 }
 }
 
 
 .hide {
 .hide {
-    display: none;
+    display: none !important;
 }
 }
 
 
 /**
 /**
@@ -69,7 +69,7 @@ ol, ul {
 }
 }
 /*以上为common部分 代码合并develop后移除*/
 /*以上为common部分 代码合并develop后移除*/
 
 
-@import "common/time-view-like-share", "common/good-info";
+@import "common/time-view-like-share", "common/good-info", "common/loader";
 
 
 .ps-container {
 .ps-container {
     .ps-block {
     .ps-block {
@@ -240,5 +240,32 @@ ol, ul {
             }
             }
         }
         }
     }
     }
+}
 
 
+.load-more-info {
+    width: 100%;
+    height: 70rem / $pxConvertRem;
+    line-height: 70rem / $pxConvertRem;
+    text-align: center;
+    font-size: 14px;
+    overflow: hidden;
+
+    .loading {
+        display: inline-block;
+        vertical-align: top;
+
+        .loader-inner {
+            display: inline-block;
+            height: 40rem / $pxConvertRem;
+            width: 40rem / $pxConvertRem;
+            margin-top: 12rem / $pxConvertRem;
+
+            > div {
+                height: 30rem / $pxConvertRem;
+                width: 30rem / $pxConvertRem;
+                border: 2px solid #f00;
+                border-bottom-color: transparent;
+            }
+        }
+    }
 }
 }

@@ -48,5 +48,14 @@
                 {{/ info}}
                 {{/ info}}
             </div>
             </div>
         </div>
         </div>
+        <div id="load-more-info" class="load-more-info">
+            <div class="loading status">
+                <div class="loader-inner ball-clip-rotate">
+                    <div></div>
+                </div>
+                正在加载...
+            </div>
+            <span class="no-more status hide">没有更多的资讯</span>
+        </div>
     {{/ data}}
     {{/ data}}
 </div>
 </div>