Merge branch 'dev' of https://github.com/ant-design/ant-design.github.io into dev

static/script.js

@@ -14,6 +14,7 @@ $(function() {
 
   function slideToggleCode(item) {
     $(item).find('.highlight').slideToggle(150);
+    item.toggleClass('code-box-expand');
   }
     var navFunc={
         navStrArr: [],

static/style.css

@@ -292,13 +292,11 @@ header {
 .banner-box #bannerAnim .banner-line-absolute {
   position: absolute;
 }
-/*footer*/
 
 footer {
   clear: both;
   border-top: 1px solid #eee;
   font-size: 16px;
-  position: relative;
   background: #fff;
 }
 footer ul {
@@ -382,7 +380,7 @@ footer ul li > a {
 
 .main-container {
   width: calc(100% - 260px);
-  padding: 30px 40px 80px;
+  padding: 30px 40px 120px;
   -webkit-animation: xRightMatrix .5s ease-out .5s backwards;
   animation: xRightMatrix .5s ease-out .5s backwards;
 }
@@ -1005,20 +1003,18 @@ footer ul li > a {
   opacity: 1;
 }
 
-.code-boxes {
-  -webkit-column-count: 2;
-  -moz-column-count: 2;
-  column-count: 2;
-  -moz-column-gap: 15px;
-  -webkit-column-gap: 15px;
-  column-gap: 15px;
-}
-
 .code-box {
   border: 1px solid #E9E9E9;
   border-radius: 6px;
   display: inline-block;
   width: 100%;
+  position: relative;
+  margin: 0px 15px 15px 0px;
+}
+
+.code-box.code-box-expand {
+  border-bottom: 1px dashed #ddd;
+  border-radius: 6px 6px 0 0;
 }
 
 .code-box .code-box-demo {
@@ -1085,8 +1081,14 @@ footer ul li > a {
 .code-box .highlight {
   overflow: hidden;
   display: none;
-  border-top: 1px dashed #ddd;
   padding: 5px 15px;
+  position: absolute;
+  width: calc(100% + 2px);
+  border: 1px solid #ddd;
+  border-top: 1px dashed #ddd;
+  border-radius: 0 0 6px 6px;
+  background: #fff;
+  margin-left: -1px;
 }
 
 .code-box pre {

theme/templates/component.html

@@ -1 +1,6 @@
 {% extends "page.html" %}
+
+{% block waterfall %}
+<!-- https://raw.githubusercontent.com/kudago/waterfall/master/jquery.waterfall.js -->
+<script src="https://t.alipayobjects.com/images/T1iSVfXolAXXXXXXXX.js"></script>
+{% endblock %}

theme/templates/layout.html

@@ -104,7 +104,9 @@
           组件演示
           <i class="iconfont icon-all" title="展开全部代码"></i>
         </h2>
-        <div class="code-boxes">
+        <div class="code-boxes waterfall" data-col-min-width="400"
+	data-default-container-width="800"
+	data-autoresize="true">
           {%- set items = resource.pages|find_demo_in_component(post.meta.directory) %}
           {%- for item in items %}
             {%- set post = item.meta.filepath|parsePost %}
@@ -116,6 +118,7 @@
     </section>
   </div>
   {%- endif %}
+  {% block waterfall %}{% endblock %}
   <footer id="footer">
     <ul>
       <li>