我使用的是砌体式布局。
<div id="grid">
{{#each items}}
{{> item}} <!-- <div class="to-grid"> ... </div> -->
{{/each}}
</div>
当第一次渲染布局时,如果项目数限制为X,则砌体效果很好。
Template.masonryitems.rendered = function() {
$('#grid').imagesLoaded( function(){
$('#grid').masonry({
itemSelector : '.to-grid'
});
});
}
当用户点击“加载更多”按钮时,系统会自动更新项目数量(如https://www.discovermeteor.com/blog/template-level-subscriptions/所述)。
使用启用的砌体效果,新加载的项目将替换旧的项目 - 页面上显示的项目数量不会更改。
我想新装的物品需要附加到砌体中,但是如何检测/查询它们?
$('#grid').masonry()
.append( newElements ) //this shall be done automatically thanks to reactive subscription
.masonry('appended', newElements);