You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
# 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)
|