README.md

@@ -1,3 +1,59 @@
 # masonry
 
 瀑布流目录
+
+## 来源
+
+曾经遇到个客户,客户的目录结构是固定的两层,即第一层是文件夹,下面挂的是模板.客户希望的是所有文件夹都默认展开.当时我给出的解决方案是修改数据,讲所有node节点open属性都置为true
+
+但是相应的目录也变长了,体验其实也不是很好.于是想到如果分为两列或者三列呢?也就是类似于tumblr那样的.
+## 思路
+
+瀑布流的算法就一句话,下一个区块的放置位置是当前高度和最小的那一列
+
+因此我们可以利用FineUI的绝对布局 bi.absolute 来实现,简单贴一下伪代码
+```js
+var items = [];
+var columns = [0, 0]; // 设定分两列
+var flattenEntry = this.model.flattenEntry.slice(0); // 获取扁平化为两层的目录
+var entry = {};
+while (flattenEntry.length > 0) {
+    entry = flattenEntry.shift();
+    if (columns[0] > columns[1]) {
+        items.push({
+            el: {
+                type: "目录区块"
+            },
+            left: "50%", right: 0,
+            top: columns[1]
+        });
+        columns[1] += 目录区块高度;
+    } else {
+        items.push({
+            el: {
+                type: "目录区块"
+            },
+            left: 0, right: "50%",
+            top: columns[0]
+        });
+        columns[0] += 区块高度;
+    }
+}
+ 
+return {
+    type: "bi.absolute",
+    items: items
+};
+```
+
+## 配置
+
+配置了目录面板宽度
+
+替换了目录树组件
+
+## FineUI使用
+button_group组件,context特性
+
+## 效果示例
+![](./screenshots/截图.png)