masonry

瀑布流目录

来源

曾经遇到个客户,客户的目录结构是固定的两层,即第一层是文件夹,下面挂的是模板.客户希望的是所有文件夹都默认展开.当时我给出的解决方案是修改数据,讲所有node节点open属性都置为true

但是相应的目录也变长了,体验其实也不是很好.于是想到如果分为两列或者三列呢?也就是类似于tumblr那样的.

思路

瀑布流的算法就一句话,下一个区块的放置位置是当前高度和最小的那一列

因此我们可以利用FineUI的绝对布局 bi.absolute 来实现,简单贴一下伪代码

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特性

效果示例