From 1fb01cdc96a0f09d5a31915520cb95313070a306 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 25 May 2015 18:15:41 +0800
Subject: [PATCH] waterfall layout

---
 static/script.js               |  1 +
 static/style.css               | 26 +++++++++++++++-----------
 theme/templates/component.html |  4 ++++
 theme/templates/layout.html    |  5 ++++-
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/static/script.js b/static/script.js
index 2065c1b5bd..de5d72a0b7 100644
--- a/static/script.js
+++ b/static/script.js
@@ -14,5 +14,6 @@ $(function() {
 
   function slideToggleCode(item) {
     $(item).find('.highlight').slideToggle(150);
+    item.toggleClass('code-box-expand');
   }
 });
diff --git a/static/style.css b/static/style.css
index 86f9bdef95..d87995a2e3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -379,7 +379,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;
 }
@@ -1002,20 +1002,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 {
@@ -1082,8 +1080,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 {
diff --git a/theme/templates/component.html b/theme/templates/component.html
index fa11c0311f..c81260feb3 100644
--- a/theme/templates/component.html
+++ b/theme/templates/component.html
@@ -1 +1,5 @@
 {% extends "page.html" %}
+
+{% block waterfall %}
+<script src="https://raw.githubusercontent.com/kudago/waterfall/master/jquery.waterfall.js"></script>
+{% endblock %}
diff --git a/theme/templates/layout.html b/theme/templates/layout.html
index 970aa53f81..a294b0ce46 100644
--- a/theme/templates/layout.html
+++ b/theme/templates/layout.html
@@ -103,7 +103,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 %}
@@ -115,6 +117,7 @@
     </section>
   </div>
   {%- endif %}
+  {% block waterfall %}{% endblock %}
   <footer id="footer">
     <ul>
       <li>