{"id":2998,"date":"2016-04-22T16:31:27","date_gmt":"2016-04-22T08:31:27","guid":{"rendered":"http:\/\/blog.hoyo.idv.tw\/?p=2998"},"modified":"2017-05-08T20:16:50","modified_gmt":"2017-05-08T12:16:50","slug":"imagesloaded","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=2998","title":{"rendered":"imagesLoaded"},"content":{"rendered":"<h2>\u7db2\u9801\u8f09\u5165\u5716\u7247\u5b8c\u6210\u5f8c...<\/h2>\n<ul>\n<li><a href=\"http:\/\/imagesloaded.desandro.com\/\" target=\"_blank\">imagesLoaded<\/a><\/li>\n<\/ul>\n<p>\u9019\u500b\u529f\u80fd\u9700\u6c42\u662f\u70ba\u4e86\u76f8\u7c3f\u4f7f\u7528\u4e86\u7011\u5e03\u6d41\u8a08\u7b97\u5716\u7247\u9ad8\u5ea6\uff0c\u56e0\u70ba\u7b49\u5bec\u4e0d\u7b49\u9ad8\u6240\u4ee5\u5fc5\u9808\u7b49\u5716\u7247\u5be6\u969b\u8f09\u5165\u5b8c\u6210\u624d\u77e5\u9053\u78ba\u5207\u9ad8\u5ea6\u3002<\/p>\n<pre class=\"nums:true lang:default decode:true \">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head lang=\"en\"&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"\/Component_Front\/bootstrap\/css\/bootstrap.min.css\"\/&gt;\r\n    &lt;script src=\"\/Component_Front\/jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"\/Component_Front\/jquery-tmpl-master\/jquery.tmpl.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"\/Component_Front\/imagesloaded.pkgd.min.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;style&gt;\r\n        .box{\r\n            padding: 15px 0 0 15px;\r\n            float:left;\r\n        }\r\n        .pic{\r\n            padding: 10px;\r\n            border:1px solid #ccc;\r\n            box-shadow: 0 0 6px #ccc;\r\n            border-radius: 5px;\r\n        }\r\n        .pic img{\r\n            width: 180px;\r\n            height:auto;\r\n        }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div&gt;\r\n    &lt;p&gt;Container height: &lt;span id=\"containerHeight\"&gt;&lt;\/span&gt;&lt;\/p&gt;\r\n    &lt;div id=\"Main\"&gt;&lt;\/div&gt;\r\n\r\n    &lt;script id=\"Template\" type=\"text\/template\"&gt;\r\n        &lt;div class=\"box\"&gt;\r\n            &lt;div class=\"pic\"&gt;&lt;img src=\"${src}\" alt=\"\"\/&gt;&lt;\/div&gt;\r\n            &lt;div class=\"text\"&gt;&lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n    &lt;\/script&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n    $.post('Json.php', {}, function(Json){\r\n        $('#Template').tmpl(Json).appendTo('#Main');\r\n    }, 'json').done(function(){\r\n\r\n        \/\/ \u5716\u7247\u8f09\u5165\u5b8c\u6210\u5f8c \u53d6\u5f97\u6700\u5f8c\u771f\u6b63\u9ad8\u5ea6\r\n        $('.box').imagesLoaded( function() {\r\n            $('#containerHeight').html($(document).height());\r\n        });\r\n\r\n    });\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<h2>AngularJS<\/h2>\n<p>$timeout \u7684\u5ef6\u9072\u6642\u9593\u5fc5\u9808\u8db3\u5920\u8b93\u5716\u7247\u8f09\u5165\u5b8c\u6210\uff0c\u5f97\u5230\u7684\u9ad8\u5ea6\u624d\u6703\u662f\u6b63\u78ba\u7684<\/p>\n<pre class=\"nums:true lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html ng-app=\"myApp\"&gt;\r\n&lt;head lang=\"en\"&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;title&gt;&lt;\/title&gt;\r\n    &lt;link rel=\"stylesheet\" href=\"\/Component_Front\/bootstrap\/css\/bootstrap.min.css\"\/&gt;\r\n    &lt;script src=\"\/Component_Front\/jquery-1.11.3.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"\/Component_Front\/angular-1.5.5\/angular.min.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;style&gt;\r\n        .box{\r\n            padding: 15px 0 0 15px;\r\n            float:left;\r\n        }\r\n        .pic{\r\n            padding: 10px;\r\n            border:1px solid #ccc;\r\n            box-shadow: 0 0 6px #ccc;\r\n            border-radius: 5px;\r\n        }\r\n        .pic img{\r\n            width: 180px;\r\n            height:auto;\r\n        }\r\n    &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div ng-controller=\"myCtrl\"&gt;\r\n\r\n    &lt;p&gt;Container height: {{containerHeight}}&lt;\/p&gt;\r\n    &lt;div class=\"box\"  ng-repeat=\"post in posts\"&gt;\r\n        &lt;div class=\"pic\"&gt;&lt;img ng-src=\"{{post.src}}\" alt=\"\"\/&gt;&lt;\/div&gt;\r\n        &lt;div class=\"text\"&gt;&lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;script&gt;\r\n    var app = angular.module('myApp', []);\r\n    app.controller(\"myCtrl\", ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {\r\n        $http.get('Json.php').\r\n                success(function(data, status, headers, config) {\r\n                    $scope.posts = data;\r\n                }).\r\n                error(function(data, status, headers, config) {\r\n                    \/\/ log error\r\n                });\r\n        \r\n        $timeout(function () {\r\n            $scope.containerHeight = $(document).height();\r\n        }, 1000);\r\n    }]);\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<p>&nbsp;<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"2998\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,116&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u7db2\u9801\u8f09\u5165\u5716\u7247\u5b8c\u6210\u5f8c... im...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"2998\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,116&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[260],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2998"}],"collection":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2998"}],"version-history":[{"count":3,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2998\/revisions"}],"predecessor-version":[{"id":3001,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2998\/revisions\/3001"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}