买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

摘要：本发明公开了一种实现图片木桶布局的方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：获取图片数据，基于所述图片数据创建原始虚拟DOM树；根据所述原始虚拟DOM树中虚拟DOM节点的类型，递归构建出真实DOM树；为图片对应的容器设置布局样式，以按照所述布局样式和所述真实DOM树，将所述图片渲染到页面上。该方法通过创建包括虚拟DOM节点的原始虚拟DOM树，并根据虚拟DOM节点的类型构建出真实DOM树，进而结合布局样式将图片渲染到页面上，实现了图片的木桶布局，代码量少，实现简单。

主权项：1.一种实现图片木桶布局的方法，其特征在于，包括：获取图片数据，基于所述图片数据创建原始虚拟DOM树；根据所述原始虚拟DOM树中虚拟DOM节点的类型，递归构建出真实DOM树；为图片对应的容器设置布局样式，以按照所述布局样式和所述真实DOM树，将所述图片渲染到页面上，其中，所述容器为需要添加弹性布局的父元素，所述布局样式包括弹性布局、容器属性和项目属性；所述图片数据包括图片地址信息、图片的宽度信息和高度信息；所述虚拟DOM节点的类型包括标签、属性和子节点；所述基于所述图片数据创建原始虚拟DOM树，包括：创建div标签，在所述div标签的style属性下设置所述图片的显示宽度、显示高度和扩张因子；其中，所述显示宽度和扩张因子的值是根据所述宽度信息和高度信息设置的；创建img标签，在所述img标签的src属性下设置所述图片地址信息；按照所述布局样式和所述真实DOM树，将所述图片渲染到页面上，包括：将布局样式和真实DOM树合并后得到渲染树，所述渲染树中包括渲染页面所需的节点；计算渲染树中每个节点的位置和尺寸，以将所述渲染树的各个节点渲染绘制到页面上，其中，所述节点表示根据图片地址信息获取的图片；所述递归构建出真实DOM树，包括：解析所述虚拟DOM节点，以将所述虚拟DOM节点归属为标签、属性或者子节点；根据所述虚拟DOM节点的标签名，对应创建真实DOM树的标签；将所述原始虚拟DOM树的属性添加到所述真实DOM树的对应标签上；根据所述原始虚拟DOM树中标签和属性的子节点，递归创建所述真实DOM树的子节点，并挂载到所述真实DOM树对应的标签和属性上。

全文数据：

权利要求：

百度查询： 北京京东尚科信息技术有限公司 北京京东世纪贸易有限公司 一种实现图片木桶布局的方法和装置