技术最前端,专注 Web 技术学习与总结。JavaScript, JS, ES6, TypeScript, Vue, PHP, CSS3, Html5, Node, Git, Markdown 等技术文章。
瀑布流的布局方式展现的内容通常是扁平化、琐碎的东西。首先吸引人的应该是图片,并且图片是那种参差不齐的,如果瀑布流中文字过多,会给人很杂乱的感觉,所以瀑布流更适合单纯的图片浏览。
目前主流的瀑布流布局都是采用定位的方式,对每个单元格计算定位值,如下图:
DOM:Document Object Model,浏览器将 HTML 解析成树形的数据结构,简称 DOM。
CSSOM:CSS Object Model,浏览器将 CSS 代码解析成树形的数据结构。
DOM 和 CSSOM 都是以 Bytes → characters → tokens →nodes → object model.这样的方式生成最终的数据。如下图所示:
DOM 树的构建过程是一个深度遍历过程:当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
Render Tree:DOM 和 CSSOM 合并后生成 Render Tree,如下图:
Render Tree 和 DOM 一样,以多叉树的形式保存了每个节点的 css 属性、节点本身属性、以及节点的孩子节点。
注意:display:none 的节点不会被加入 Render Tree,而 visibility: hidden 则会,所以,如果某个节点最开始是不显示的,设为 display:none 是更优的。