diff --git a/config.js b/config.js
new file mode 100644
index 0000000..aa8db9f
--- /dev/null
+++ b/config.js
@@ -0,0 +1,19 @@
+!(function () {
+    BI.config("dec.provider.layout", function (provider) {
+        provider.inject({
+            layoutConfig: {
+                center: {
+                    left: {
+                        width: 550,
+                        maxSize: 800
+                    }
+                }
+            }
+        });
+    });
+
+    BI.config("dec.frame.classic.aside.entry_tree", function (options) {
+        options.type = "dec.masonry";
+        return options;
+    });
+}());
\ No newline at end of file
diff --git a/item/masonry.block.js b/item/masonry.block.js
new file mode 100644
index 0000000..f21b125
--- /dev/null
+++ b/item/masonry.block.js
@@ -0,0 +1,75 @@
+!(function () {
+
+    var Body = BI.inherit(BI.Widget, {
+
+        props: {
+            baseCls: "dec-frame-body"
+        },
+
+        _store: function () {
+            return BI.Models.getModel("dec.model.masonry.block", this.options);
+        },
+
+        watch: {
+            masonry_selectedEntry: function (id) {
+                this.list.setValue(id);
+            }
+        },
+
+        render: function () {
+            var self = this, o = this.options;
+
+            return {
+                type: "bi.vertical",
+                items: [
+                    {
+                        el: BI.extend({
+                            type: "dec.common.img.icon_text_item",
+                            height: 36,
+                            logic: {
+                                dynamic: true
+                            },
+                            text: o.text,
+                            imgSrc: o.imgSrc,
+                            iconCls: o.iconCls
+                        })
+                    }, {
+                        el: {
+                            type: "bi.button_group",
+                            ref: function (_ref) {
+                                self.list = _ref;
+                            },
+                            layouts: [
+                                {
+                                    type: "bi.vertical"
+                                }
+                            ],
+                            items: BI.map(o.items, function (index, item) {
+                                return BI.extend({
+                                    type: "dec.common.img.icon_text_item",
+                                    height: 30,
+                                    cls: "dec-frame-platform-list-item-active dec-font-size-14"
+                                }, item);
+                            }),
+                            listeners: [
+                                {
+                                    eventName: "EVENT_CHANGE",
+                                    action: function (v) {
+                                        self.store.handleItemSelect(v);
+                                    }
+                                }
+                            ]
+                        },
+                        lgap: 15
+                    }
+                ]
+            };
+        },
+
+        setValue: function (v) {
+            this.list.setValue(v);
+        }
+    });
+
+    BI.shortcut("dec.masonry.block", Body);
+}());
\ No newline at end of file
diff --git a/item/masonry.block.model.js b/item/masonry.block.model.js
new file mode 100644
index 0000000..6a9cf27
--- /dev/null
+++ b/item/masonry.block.model.js
@@ -0,0 +1,21 @@
+(function () {
+    var Store = BI.inherit(Fix.Model, {
+
+        state: function () {
+            return {};
+        },
+
+        context: ["masonry_selectedEntry"],
+
+        actions: {
+            handleItemSelect: function (v) {
+                this.model.masonry_selectedEntry = v;
+                var entry = BI.find(this.options.items, function (index, item) {
+                    return item.id === v;
+                });
+                BI.Services.getService("dec.service.frame.tab_pane").addItem(entry);
+            }
+        }
+    });
+    BI.model("dec.model.masonry.block", Store);
+}());
\ No newline at end of file
diff --git a/masonry.js b/masonry.js
new file mode 100644
index 0000000..639a38a
--- /dev/null
+++ b/masonry.js
@@ -0,0 +1,37 @@
+!(function () {
+
+    var Body = BI.inherit(BI.Widget, {
+
+        props: {
+            baseCls: "dec-frame-body"
+        },
+
+        _store: function () {
+            return BI.Models.getModel("dec.model.masonry");
+        },
+
+        watch: {},
+
+        beforeInit: function (cb) {
+            this.store.initEntryList(cb);
+        },
+
+        render: function () {
+            var self = this;
+
+            return {
+                type: "bi.button_group",
+                layouts: [
+                    {
+                        type: "bi.absolute"
+                    }
+                ],
+                chooseType: BI.Selection.Single,
+                scrolly: true,
+                items: this.store.formatItems()
+            };
+        }
+    });
+
+    BI.shortcut("dec.masonry", Body);
+}());
\ No newline at end of file
diff --git a/masonry.model.js b/masonry.model.js
new file mode 100644
index 0000000..4b1b369
--- /dev/null
+++ b/masonry.model.js
@@ -0,0 +1,83 @@
+(function () {
+    var Store = BI.inherit(Fix.Model, {
+
+        state: function () {
+            return {
+                entries: [],
+                flattenEntry: [],
+                masonry_selectedEntry: ""
+            };
+        },
+
+        childContext: ["masonry_selectedEntry"],
+
+        actions: {
+            initEntryList: function (callback) {
+                var self = this;
+                Dec.Utils.getCompleteDirectoryTree(function (res) {
+                    self.model.entries = BI.Services.getService("dec.service.frame.entry").normalizeEntries(res.data);
+                    self.groupEntries(false);
+                    callback();
+                });
+            },
+
+            groupEntries: function () {
+                var self = this;
+                var tree = BI.Tree.transformToTreeFormat(this.model.entries);
+                tree = tree[0];
+                BI.each(tree.children, function (index, item) {
+                    item.children = self._flattenEntry(item);
+                });
+                this.model.flattenEntry = tree.children;
+            },
+
+            formatItems: function () {
+                var items = [];
+                var columns = [0, 0];
+                var flattenEntry = this.model.flattenEntry.slice(0);
+                flattenEntry = BI.filter(flattenEntry, function (index, entry) {
+                    return BI.isNotEmptyArray(entry.children);
+                });
+                var entry = {};
+                while (flattenEntry.length > 0) {
+                    entry = flattenEntry.shift();
+                    if (columns[0] > columns[1]) {
+                        items.push({
+                            el: BI.extend({
+                                type: "dec.masonry.block",
+                                text: entry.text,
+                                items: entry.children
+                            }, entry),
+                            left: "50%", right: 0,
+                            top: columns[1]
+                        });
+                        columns[1] += (entry.children.length * 30 + 36);
+                    } else {
+                        items.push({
+                            el: BI.extend({
+                                type: "dec.masonry.block",
+                                text: entry.text,
+                                items: entry.children
+                            }, entry),
+                            left: 0, right: "50%",
+                            top: columns[0]
+                        });
+                        columns[0] += (entry.children.length * 30 + 36);
+                    }
+                }
+                return items;
+            }
+        },
+
+        _flattenEntry: function (node) {
+            var items = [];
+            BI.Tree.traversal(node.children, function (index, n) {
+                if (n.entryType !== DecCst.Entries.Entry_Type.FOLDER) {
+                    items.push(n);
+                }
+            });
+            return items;
+        }
+    });
+    BI.model("dec.model.masonry", Store);
+}());
\ No newline at end of file