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

Page tree

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

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Current »

来源

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