forked from fanruan/masonry
Compare commits
No commits in common. 'master' and 'master' have entirely different histories.
2 changed files with 1 additions and 57 deletions
@ -1,59 +1,3 @@ |
|||||||
# masonry |
# 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) |
|
Before Width: | Height: | Size: 51 KiB |
Loading…
Reference in new issue