ajax局部刷新,破坏瀑布流式布局,求大神指教
做了一个图片的分享网站,里面用到了图片的瀑布流式布局jquery+masonry,
为了实现局部刷新,用了ajax,问题来了,局部刷新之后图片的瀑布流式布局被破坏了,见图,百思不得其解,求大神指教,可能的原因。
------最佳解决方案--------------------因为已经重新计算过位置了,再次更新并不会触发位置计算重新绘制页面,你可以在ajax更新完毕后执行下masonry方法试试看能不能重新布局。。
,success:function(){
//.....更新操作
//重新执行masonry操作
$('#选择器').masonry({
singleMode: true,
itemSelector: '.box'
})
}
------其他解决方案--------------------起初我也觉得是这个问题,于是我是把涉及到的脚本全部放进 updatepanel中,看更新的时候会不会一起更新(也就是你说的重新绘图),结果,失败了。。。
------其他解决方案--------------------还没用过,学习了
------其他解决方案--------------------
之前没看API,其实masonry提供了方法reload【重绘】或者appended【设置新节点的位置,效率应该比reload快】的
ajax更新完毕后执行
$('#容器选择器').masonry('reload');
就搞定了
或者
$('容器选择器').masonry( 'appended', $('新节点选择器'));
就行了,注意是新节点,以前布局过的不要选择,要不会布局会错乱。
不想麻烦就直接reload
------其他解决方案--------------------刚写的一篇文章,有需要自己参考看看:动态更新的内容如何以瀑布流masonry重新布局