关于ajax刷新后破坏瀑布流式布局jquery+masonry的一点想法

最新推荐文章于 2021-08-06 06:14:03 发布

原创最新推荐文章于 2021-08-06 06:14:03 发布 · 2.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #AJAX #Ajax #jquery #jQuery #JQUERY #Jquery #脚本

ajax 同时被 2 个专栏收录

1 篇文章

订阅专栏

jQuery

0 篇文章

订阅专栏

本文介绍了一个图片分享网站使用jQuery+masonry实现瀑布流布局的过程。针对局部刷新导致布局错乱的问题，作者通过论坛求助找到了解决方案，并详细记录了如何利用ScriptManager在Ajax加载后重新初始化布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做了一个图片的分享网站，里面用到了图片的瀑布流式布局jquery+masonry，为了实现局部刷新，用了ajax，问题来了，局部刷新之后图片的瀑布流式布局被破坏了。于是在论坛上发了帖子求救http://bbs.youkuaiyun.com/topics/390281730?page=1#post-392925497，照片我就不贴了，大概用了这么几个脚本

 <script type="text/javascript" src="js/jquery.masonry.min.js"></script>

 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function(){
	 var $container = $('#container');
	 $container.imagesLoaded(function(){
	$container.masonry({
		itemSelector: '.box',
		columnWidth: 5 //每两列之间的间隙为5像素
		 });
	       });
            });   
      </script>

帖子上 showbo版主告诉我问题出在什么地方：ajax刷新后没有再重新加载脚本，非常感谢，于是各种百度，当然了，还是失败了，于是试着把第三个
脚本注释掉，发现正好是布局被破坏掉的样子，于是猜想，可能是这个脚本没有加载，问题来了，怎么加载？方案有两种：1.在ajax加载完毕后再加载一次这个脚本（ showbo提供，再次感谢）。可惜ajax都是自学，没有到那个层次，作罢 2,。是不是可以在后台控件的事件中进行脚本的加载？触发局部更新的是个Imagebutton按钮，于是这么写

 ScriptManager.RegisterStartupScript(UpdatePanel1, ClientScript.GetType(), "myscript", "<script>Handler();</script>", false);

（实现将第三个脚本的内容装进函数function Handler()中）利用scriptmanager来管理页面的脚本，再次运行网站，成功。再次感谢showbo版主