waterfall layout

static/script.js

@@ -14,5 +14,6 @@ $(function() {
 
   function slideToggleCode(item) {
     $(item).find('.highlight').slideToggle(150);
+    item.toggleClass('code-box-expand');
   }
 });

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 {

theme/templates/component.html

 {% extends "page.html" %}
+
+{% block waterfall %}
+<script src="https://raw.githubusercontent.com/kudago/waterfall/master/jquery.waterfall.js"></script>
+{% endblock %}

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>