{"id":444,"date":"2014-12-09T15:38:06","date_gmt":"2014-12-09T07:38:06","guid":{"rendered":"https:\/\/aweidesign.why3s.tw\/wp2\/?p=444"},"modified":"2015-03-26T16:24:34","modified_gmt":"2015-03-26T08:24:34","slug":"awei%e7%a0%94%e7%a9%b6%e5%ae%a4%e6%b5%81%e7%80%91%e7%b6%b2%e9%a0%81%e7%89%88%e5%9e%8bjquery-masonry%e5%9c%96%e7%89%87%e7%b6%b2%e7%ab%99","status":"publish","type":"post","link":"https:\/\/aweidesign.why3s.tw\/wp2\/444\/awei%e7%a0%94%e7%a9%b6%e5%ae%a4%e6%b5%81%e7%80%91%e7%b6%b2%e9%a0%81%e7%89%88%e5%9e%8bjquery-masonry%e5%9c%96%e7%89%87%e7%b6%b2%e7%ab%99","title":{"rendered":"[awei\u7814\u7a76\u5ba4]\u6d41\u7011\u7db2\u9801\u7248\u578b(jQuery Masonry\u5716\u7247\u7db2\u7ad9)"},"content":{"rendered":"

\u6709\u4e0d\u5c11\u7684\u7db2\u7ad9\uff0c\u5c07\u7db2\u7ad9\u4e2d\u7684 CSS Div\u5340\u584a\uff0c\u96a8\u8457Div\u7684\u9ad8\u5ea6\uff0c\u81ea\u52d5\u7684\u5411\u4e0b\u7de8\u6392\uff0c\u770b\u8d77\u4f86\u5f88\u50cf\u7011\u5e03\u5ddd\u6d41\u800c\u4e0b\u7684\u611f\u89ba\uff0c\u7011\u5e03\u6d41\u7248\u578b\uff0c\u5f88\u50cf\u662fCSS\u7684\u6d6e\u52d5\u6392\u7248\u4e00\u6a23\uff0c\u5716\u7247\u6703\u4f9d\u7167\u5927\u5c0f\u9032\u884c\u7e2e\u653e\u6392\u5217\uff0c\u5982\u679c\u642d\u914d\u97ff\u61c9\u5f0f\u7db2\u9801\u7684\u898f\u756b\uff0c\u5247\u53ef\u4ee5\u4f9d\u7167\u756b\u9762\u7684\u5927\u5c0f\u9032\u884c\u7e2e\u653e\u3002<\/p>\n

\u00a0Masonry\u7011\u5e03\u6d41\u7248\u578b\uff1a<\/span>jQuery Masonry<\/a><\/p>\n

\n

\u5982\u679c\u4f9d\u7167\u539f\u5ee0\u82f1\u6587\u7db2\u9801\u6559\u5b78~~\u6703\u975e\u5e38\u7684\u9727\u6bba\u6bba~~~\u5efa\u8b70\u60a8\u53ef\u4ee5\u4e0b\u8f09\u4ed6\u7684\u539f\u59cb\u6a94\u6848\u4f86\u500b\u500b\u7834\u89e3
\n\u8a18\u8a3b\u4e00\u5b9a\u8981\u4e0b\u8f09\u4ed6\u7684masonry.pkgd.min.js
\n<\/a><\/p>\n

\n

\u505a\u597d\u7684\u611f\u89ba\u5927\u6982\u6703\u662f\u9019\u6a23
\n\"mansory_t1\"<\/a><\/p>\n<\/div>\n

\u7bc4\u4f8b\u7db2\u9801<\/a><\/p>\n

\n

\u5f15\u7528Jquery+jQuery Masonry<\/b><\/span><\/h3>\n

\u653e\u5728<head>…..<\/head>\u4e4b\u9593<\/p>\n

<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js\" type=\"text\/javascript\"><\/script>\r\n<script type=\"text\/javascript\" src=\"http:\/\/masonry.desandro.com\/jquery.masonry.min.js\"><\/script><\/pre>\n
HTML\uff1a<\/b><\/p>\n
\u653e\u5728<body>…..<\/body>\u4e4b\u9593<\/p>\n
<div id=\"_container\" style=\"height:800px; width:728px; overflow:hidden; margin:0 auto;\">         \r\n     <div class=\"content_box\">\u5167\u5bb91<\/div>\r\n     <div class=\"content_box\">\u5167\u5bb92<\/div>\r\n     <div class=\"content_box\">\u5167\u5bb93<\/div>\r\n     <div class=\"content_box\">\u5167\u5bb94<\/div>\r\n     <div class=\"content_box\">\u5167\u5bb95<\/div>\r\n     <div class=\"content_box\">\u5167\u5bb96<\/div>\r\n<\/div><\/pre>\n
CSS\u6a23\u5f0f\u8a2d\u5b9a\uff1a<\/b><\/p>\n
\u653e\u5728<head>…..<\/head>\u4e4b\u9593<\/p>\n
<style>\r\n.content_box{\r\n\tdisplay: inline-block;\r\n\tborder: 1px dotted #4F4F4F;\r\n\tpadding: 10px;\r\n\tmargin: 5px 5px 5px 0;\r\n\toverflow:hidden;\r\n\twidth:337px;\r\n}\r\n<\/style>\r\n\r\n<\/pre>\n
\u555f\u7528Jquery Masonry\u5143\u4ef6(\u653e\u5728<script>…..<\/script>\u4e4b\u4e0b\uff1a)<\/b><\/span><\/h3>\n
$(function(){\r\n\t$('#_container').imagesLoaded(function () {\r\n        $('#_container').masonry({        \r\n            itemSelector: '.content_box',\r\n            columnWidth: 364,\r\n            animate:true\r\n        });\r\n\t});\r\n});<\/pre>\n
\n
\u6a94\u6848\u4e0b\u8f09<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u6709\u4e0d\u5c11\u7684\u7db2\u7ad9\uff0c\u5c07\u7db2\u7ad9\u4e2d\u7684 CSS Div\u5340\u584a\uff0c\u96a8\u8457Div\u7684\u9ad8\u5ea6\uff0c\u81ea\u52d5\u7684\u5411\u4e0b\u7de8\u6392\uff0c\u770b\u8d77\u4f86\u5f88\u50cf\u7011\u5e03\u5ddd\u6d41\u800c\u4e0b\u7684\u611f\u89ba\uff0c […]<\/p>\n","protected":false},"author":1,"featured_media":445,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,109],"tags":[71,69,70],"class_list":["post-444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-classroom","category-webtemplate","tag-jquery-masonry","tag-69","tag-70"],"_links":{"self":[{"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/posts\/444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/comments?post=444"}],"version-history":[{"count":9,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/posts\/444\/revisions"}],"predecessor-version":[{"id":455,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/posts\/444\/revisions\/455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/media\/445"}],"wp:attachment":[{"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/media?parent=444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/categories?post=444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/aweidesign.why3s.tw\/wp2\/wp-json\/wp\/v2\/tags?post=444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}