日期:2014-05-16  浏览次数:20589 次

ajax局部刷新,破坏瀑布流式布局,求大神指教
做了一个图片的分享网站,里面用到了图片的瀑布流式布局jquery+masonry,

为了实现局部刷新,用了ajax,问题来了,局部刷新之后图片的瀑布流式布局被破坏了,见图,百思不得其解,求大神指教,可能的原因。
------最佳解决方案--------------------
因为已经重新计算过位置了,再次更新并不会触发位置计算重新绘制页面,你可以在ajax更新完毕后执行下masonry方法试试看能不能重新布局。。
,success:function(){
//.....更新操作
//重新执行masonry操作
 $('#选择器').masonry({
   singleMode: true,
   itemSelector: '.box'
})
}

------其他解决方案--------------------
起初我也觉得是这个问题,于是我是把涉及到的脚本全部放进 updatepanel中,看更新的时候会不会一起更新(也就是你说的重新绘图),结果,失败了。。。
------其他解决方案--------------------
还没用过,学习了
------其他解决方案--------------------
引用:
起初我也觉得是这个问题,于是我是把涉及到的脚本全部放进 updatepanel中,看更新的时候会不会一起更新(也就是你说的重新绘图),结果,失败了。。。


之前没看API,其实masonry提供了方法reload【重绘】或者appended【设置新节点的位置,效率应该比reload快】的

ajax更新完毕后执行
$('#容器选择器').masonry('reload');
就搞定了

或者
$('容器选择器').masonry( 'appended', $('新节点选择器'));

就行了,注意是新节点,以前布局过的不要选择,要不会布局会错乱。

不想麻烦就直接reload

------其他解决方案--------------------
刚写的一篇文章,有需要自己参考看看:动态更新的内容如何以瀑布流masonry重新布局