相干组件版本：avalon 1.3.6、masonry 3.1.5
近来，在公司的项目中，要开辟一个运用瀑布流的前台，衡量了种种解决计划后，照样以为masonry最成熟，所以就选用了它。而在之前开辟背景的过程当中，对avalon也用得挺熟手的了，所以此次做前台也用上。因为avalon是管dom的，masonry也是管dom的，所以完成兼容的重点就是，让它们管统一份dom，而不是各管各的。
我的avalon相干代码是如许的：
avalon.define({
$id: 'masonry',
article_list: <?php echo $articleList; ?>,
});
个中的article_list就是寄存瀑布流数据的数组，用php天生json花样的字符串输出，赋给article_list作为初值（初版数据）。然后，挪用avalon的ms-repeat指令来轮回衬着瀑布流的dom：
<!-- 瀑布流位置 -->
<div id="masonry_container" ms-controller="masonry">
<div id="masonry_content">
<div class="portfolio" ms-repeat-article="article_list">
<div class="portfolio-wrapper" ms-click="open_article_modal(article.id)">
<a>
<img ms-attr-src="article.cover_img_url" ms-css-height="article.cover_img_height">
</a>
<div class="article_follow side_btn"></div>
<div class="article_collect side_btn"></div>
<div class="article_body">
<div class="article_meta">
<h2>{{article.title}}</h2>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>在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，就功德圆满了！
