摘要：相关组件版本最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得最成熟，所以就选用了它。测试的结果很令人沮丧，依然没有控制节点的位置，所以应该不是这个问题。
相关组件版本：avalon 1.3.6、masonry 3.1.5
最近，在公司的项目中，要开发一个使用瀑布流的前台，衡量了各种解决方案后，还是觉得masonry最成熟，所以就选用了它。而在之前开发后台的过程中，对avalon也用得挺熟手的了，所以这次做前台也用上。由于avalon是管dom的，masonry也是管dom的，所以实现兼容的重点就是，让它们管同一份dom，而不是各管各的。
我的avalon相关代码是这样的：
avalon.define({
$id: "masonry",
article_list: ,
});
其中的article_list便是存放瀑布流数据的数组，用php生成json格式的字符串输出，赋给article_list作为初值（第一版数据）。然后，调用avalon的ms-repeat指令来循环渲染瀑布流的dom：
在avalon.scan()以后，实例化masonry，第一版数据就算是出来了，一切都很正常。
但是在后面继续加载数据的时候，就出问题了。我的设计是，判断当滚动条拉到最下，就触发事件用ajax读取第二、三、四……版的数据。
一开始我想得很简单：不就是把ajax获取到的数据直接添加到avalon的vm里，让它自动完成新数据的渲染就好了，然后再重新实例化masonry。这种方案的问题是，由于“重新实例化masonry”需要的是先把masonry对象destroy()掉，所以就会看到很明显的闪烁，而且，可以预想到，当数据越来越多的时候，重新实例化的代价就会越来越大，因此这种方案是不可取的。
接着我仔细阅读了masonry的文档，发现其原来是有addItems/appended这样的方法可供调用的，我读了文档上的示例代码（一个小插曲，由于本人的原生js实在是太不济，就想着用jquery版的，却发现无论如何都调不通，大概是因为用了requireJS来模块化的缘故吧，这里暂且不提），发现这个方法的原理就是先往dom树里添好新的dom节点，然后再将新的dom节点作为参数传入addItems/appended。这就使我犯难了，我的dom树是交给avalon来处理的，又不是自己拼的，哪来dom节点可以传给masonry呀？为了做出一份可以传给masonry的dom节点，我也是拼了，用jquery来生成一份dom节点再传给masonry，可是试了一下，无效呀，masonry根本就没有控制新增dom节点的位置。
这时候我在嘀咕，会不会是avalon还未生成dom节点，masonry就开始“控制”的缘故呢？为了测试这个可能性，我使用了avalon中的data-repeat-rendered指令，这个指令可以指定一个函数，在ms-repeat渲染完后再执行，这样就可以保证avalon已经生成好dom节点后masonry再介入。测试的结果很令人沮丧，masonry依然没有控制dom节点的位置，所以应该不是这个问题。
最终，在我的测试下，正确的做法是：把avalon生成的dom节点传给masonry，怎么实现呢？说起来也很简单，记录下拉取新数据前瀑布流已有多少个文块，也记录下拉取到多少个文块，这样就可以得到新增文块索引的范围是从几到几了；当avalon渲染完ms-repeat后，用jquery获取瀑布流所有文块的dom树，再根据算出来的新增文块索引范围，将新增的dom节点取出来后，传给masonry，就大功告成了！
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91569.html
摘要：是最流行的瀑布流插件之一，配置简单，功能强大，在上收获了。如果你想使用瀑布流提升网站体验，将是不错的选择。瀑布流，又称瀑布流式布局。需要注意的是，如果你需要加载图片，不会在图片加载完后重新布局，这可能会影响你的布局效果，建议配合使用插件。 Masonry是最流行的瀑布流插件之一，配置简单，功能强大，在Github上收获了1w+ stars。如果你想使用瀑布流提升网站体验，Masonry...
摘要：本位为官方文档翻译，原始链接安装下载下载压缩或未压缩的压缩未压缩在直接饮用文件。排列未加载完成的图片时会导致元素的重叠，可以解决这个问题。布局组件尺寸尺寸配置项和可以可以设置组件的列宽和间距。增加移除控件在瀑布流末尾增加新控件并重排。 本位为Masonry官方文档翻译，原始链接 安装Install 下载 下载压缩或未压缩的masonry masonry.pkgd.min.js （压缩...
摘要：现在微软终于痛定思痛决定放弃了不支持的安全更新，对我们前端来说，真的是重大利好啊言归正传，这篇文章的目的就是把怎么用构建一个单页面程序介绍以下，是对自己的一个总结，也喜欢对大家有一定的借鉴作用，写的不好不对的地方希望大家多评论评论谢谢。 这篇文章是写在公司项目结束之后的，因为我个人不太会把没有实践过的东西写出来，实践是检验真理的唯一标准么，用的怎么样，好不好用，在成熟实践过的项目上能体...
摘要：也是一个版本，没有增加任何新特征。不同的是内部源码已经全部用重新编写了。之前使用风格的编写，进行合并。很好的解决这问题。随着对的大胆尝试的成功，以后源码也计划随迁移。不过，大家放心，最后出来的框架还是形式，能运行于下。 avalon2.1.16也是一个Fix BUG版本，没有增加任何新特征。不同的是内部源码已经全部用es6 modules重新编写了。之前使用nodejs风格的Commo...
摘要：那么组件容器是被谁替换呢当然是组件。我们使用来定义组件时，必须有一个属性，它是一个模块，它会转换为组件。一个组件可以拥有个元素，它们的值不能重复。好了，我们看一下切换卡是如何做的。 本章开始介绍slot机制。 slot是WEBComponent引进的东西，叫做插槽。在浏览器中，它为一个content元素。不过有资料表明，它会更名为slot。 并且在其他语言的模板引擎中，slot标签更为...
阅读 938·2023-04-26 01:35
阅读 2294·2021-11-02 14:44
阅读 6911·2021-09-22 15:38
阅读 2042·2021-09-06 15:11
阅读 3425·2019-08-30 15:53
阅读 666·2019-08-29 16:54
阅读 507·2019-08-26 13:48
阅读 1539·2019-08-26 13:47
