【仅供内部供应商使用,不提供对外解答和培训】

Page tree

【仅供内部供应商使用,不提供对外解答和培训】

Skip to end of metadata
Go to start of metadata

来源

曾经遇到个客户,客户的目录结构是固定的两层,即第一层是文件夹,下面挂的是模板.客户希望的是所有文件夹都默认展开.当时我给出的解决方案是修改数据,讲所有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特性

源代码

https://git.fanruan.com/dailer/masonry

效果实例



  • No labels

5 Comments

  1. Anonymous

    源代码地址失效

    1. Anonymous

      没登录吧

      1. Anonymous

        是不是设置成私有仓库了?

        1. Anonymous

          好了再试试,之前做过迁移,权限默认继承了

          1. Anonymous

            好了  谢谢,这个wiki下的其他链接好像也有同样的问题,烦请修改下