做了一下卡片

public/css/style.css

@@ -30,6 +30,7 @@ code {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     height: 40px;
+    line-height: 20px;
 }
 .bookmarkNormalHover {
     white-space: nowrap;
@@ -44,6 +45,9 @@ code {
 .bookmarkOperaterHover {
     cursor: pointer;
 }
+.tags {
+    cursor: default;
+}
 .bookmarkEditHover {
     white-space: nowrap;
     text-overflow: ellipsis;

public/index.html

@@ -56,5 +56,6 @@
         <script src="/scripts/externe/semantic.min.js"></script>
         <script src="/scripts/externe/calendar.min.js"></script>
         <script src="/scripts/externe/jquery.uploadfile.min.js"></script>
+        <script src="/scripts/externe/ng-infinite-scroll.min.js"></script>
     </body>
 </html>

public/scripts/app-angular.js

@@ -1,4 +1,4 @@
-var app = angular.module('bookmarkApp', ['ui.router', 'ngCookies']);
+var app = angular.module('bookmarkApp', ['ui.router', 'ngCookies', 'infinite-scroll']);
 
 app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
     $httpProvider.interceptors.push('httpInterceptor');

public/scripts/controllers/bookmarks-controller.js

@@ -4,14 +4,15 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
     $scope.showSearch = false; // 搜索对话框
     $scope.bookmarkNormalHover = false;
     $scope.bookmarkEditHover = false;
-    $scope.showStyle = ($stateParams && $stateParams.showStyle) || 'navigate'; // 显示风格'navigate', 'card', 'table'
+    $scope.showStyle = 'card';
+    ($stateParams && $stateParams.showStyle) || 'navigate'; // 显示风格'navigate', 'card', 'table'
     $('.js-radio-' + $scope.showStyle).checkbox('set checked');
     $scope.edit = false;
     const perPageItems = 20;
     $scope.totalPages = 0;
     $scope.currentPage = 1;
     $scope.inputPage = '';
-
+    $scope.loadBusy = false;
     $scope.changeCurrentPage = function(currentPage) {
         currentPage = parseInt(currentPage) || 0;
         console.log(currentPage);
@@ -93,6 +94,13 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
         $(".js-msg").remove();
     }
 
+    $scope.loadCardData = function() {
+        console.log('loadCardData.........')
+        $scope.currentPage += 1;
+        $scope.changeCurrentPage($scope.currentPage);
+        $scope.loadBusy = true;
+    }
+
     pubSubService.subscribe('EditCtr.inserBookmarsSuccess', $scope, function(event, params) {
         params.showStyle = $scope.showStyle;
         console.log('subscribe EditCtr.inserBookmarsSuccess', params);
@@ -112,8 +120,15 @@ app.controller('bookmarksCtr', ['$scope', '$state', '$stateParams', '$filter', '
                     if (data.totalItems == 0) {
                         toastr.info('您还没有书签，请点击菜单栏的添加按钮进行添加', "提示");
                     }
+                } else {
+                    if (params.showStyle == 'card') {
+                        console.log('loadCardData end.........')
+                        $scope.bookmarks = $scope.bookmarks.concat(data);
+                        $scope.loadBusy = false;
                     } else {
                         $scope.bookmarks = data;
+                    }
+
                     if ($scope.bookmarks.length <= 2) {
                         $(".js-msg").removeClass("hidden");
                     }

public/scripts/externe/ng-infinite-scroll.min.js

@@ -0,0 +1,2 @@
+/* ng-infinite-scroll - v1.0.0 - 2013-02-23 */
+var mod;mod=angular.module("infinite-scroll",[]),mod.directive("infiniteScroll",["$rootScope","$window","$timeout",function(i,n,e){return{link:function(t,l,o){var r,c,f,a;return n=angular.element(n),f=0,null!=o.infiniteScrollDistance&&t.$watch(o.infiniteScrollDistance,function(i){return f=parseInt(i,10)}),a=!0,r=!1,null!=o.infiniteScrollDisabled&&t.$watch(o.infiniteScrollDisabled,function(i){return a=!i,a&&r?(r=!1,c()):void 0}),c=function(){var e,c,u,d;return d=n.height()+n.scrollTop(),e=l.offset().top+l.height(),c=e-d,u=n.height()*f>=c,u&&a?i.$$phase?t.$eval(o.infiniteScroll):t.$apply(o.infiniteScroll):u?r=!0:void 0},n.on("scroll",c),t.$on("$destroy",function(){return n.off("scroll",c)}),e(function(){return o.infiniteScrollImmediateCheck?t.$eval(o.infiniteScrollImmediateCheck)?c():void 0:c()},0)}}}]);

public/views/bookmarks.html

@@ -92,18 +92,30 @@
     </tfoot>
 </table>
 <div class="ui segment" ng-if="showStyle === 'card'">
-    <div class="ui five stackable cards">
-        <div class="card link raised" ng-repeat="bookmark in bookmarks">
-            <div class="image">
+    <div class="ui five link stackable cards" infinite-scroll='loadCardData()' infinite-scroll-disabled='loadBusy' infinite-scroll-distance='1'>
+        <div class="card" ng-repeat="bookmark in bookmarks">
+            <div class="image" href="{{ bookmark.url }}" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
                 <img ng-src="./images/snap/{{bookmark.id}}.png" err-src="./images/snap/default.png"/>
             </div>
-            <div class="content" href="{{ bookmark.url }}">
+            <div class="content" ng-click="jumpToTags(tag.id)">
                 <div class="description bookmarkTitle">
                     {{bookmark.title}}
                 </div>
-                <div class="meta">
-                    <span class="date">{{ bookmark.created_at }}</span>
             </div>
+            <div class="extra content tags">
+                <div class="ui label" ng-repeat="tag in bookmark.tags" tag-id="{{ tag.id }}" ng-click="jumpToTags(tag.id)">
+                    {{ tag.name }}
+                </div>
+            </div>
+            <div class="extra content" ng-click="jumpToUrl(bookmark.url, bookmark.id)">
+                <span class="left floated like">
+                    <i class="add to calendar icon"></i>
+                    {{ bookmark.created_at }}
+                </span>
+                <span class="right floated like">
+                    <i class="pointing up icon"></i>
+                    {{ bookmark.click_count }}
+                </span>
             </div>
         </div>
     </div>

routes/api.js

@@ -8,14 +8,6 @@ var multer = require('multer');
 var webshot = require('webshot');
 var fs = require('fs');
 
-var webshotOptions = {
-    shotSize: {
-        width: 320,
-        height: 320
-    },
-    timeout: 50000,
-};
-
 var storage = multer.diskStorage({
     destination: function(req, file, cb) {
         cb(null, 'uploads/')
@@ -627,6 +619,7 @@ api.post('/getTitle', function(req, response) {
 
 api.getSnapByTimer = function() {
     console.log('getSnapByTimer...........');
+    var timeout = 5000
     setInterval(function() {
         var today = new Date().getDate();
         db.getBookmarkWaitSnap(today)
@@ -644,6 +637,13 @@ api.getSnapByTimer = function() {
                                 db.updateBookmarkSnapState(id, today + 31);
                                 return;
                             }
+                            var webshotOptions = {
+                                shotSize: {
+                                    width: 320,
+                                    height: 160
+                                },
+                                timeout: timeout,
+                            };
                             webshot(url, finePath, webshotOptions, function(err) {
                                 var newSnapState = -1;
                                 if (err) {
@@ -661,7 +661,7 @@ api.getSnapByTimer = function() {
                 }
             })
             .catch((err) => console.log('getBookmarkWaitSnap err', err));
-    }, 60000);
+    }, timeout + 1000);
 }
 
 function md5(str) {