Skip to content
Menu
Yuuk的博客
  • 首页
  • 前端技术
    • JavaScript
    • HTML & CSS
  • SEO
  • 设计
    • 素材分享
    • 设计教程
  • 随笔
Yuuk的博客

jQuery Masonry使用ajax获取数据的问题

Posted on 2016年11月26日2019年12月23日 by yuuk

最近使用jQuery Masonry做瀑布流加载效果(非滚动加载),点击load按钮即加载下一页数据,页面默认会有一组由服务端渲染读取过来的数据。

ajax请求成功后,后端会返回瀑布流元素的html,以为可以直接使用jQuery append方法追加到瀑布流容器内,再使用Masonry提供的appended方法重新渲染瀑布流。

结果~不行!

官方的appended方法用法如下图:

大概的意思是DOM结构必须转成jQuery对象。但是后端返回后来的数据是一串html字符串,并非单个<div class="grid-item">...</div>,所以不能转成jQuery对象。

折腾一好一阵后google到解决办法了:

$("#content").append(html).masonry( 'reload' );

直接向瀑布流容器appendhtml结构后调用Masonry的reload事件,这是官网没有说到的。

打赏赞(2)分享

发表回复 取消回复

您的邮箱地址不会被公开。 必填项已用 * 标注

搜索

近期文章

  • 宝塔面板中使用docker部署nodejs应用
  • 如何将docker镜像上传到阿里云
  • React Native 报错 No bundle URL present 解决方法
  • axios 给每一个请求添加耗时统计
  • css filter属性导致fixed失效

标签

addEventListener ajax ajax跨域 chatAt css居中 DNS缓存 docker gulp ie7 json jsonp margin memcache mysql nodejs ps技巧 typescript void vpn vuejs wampserver webpack win10 XMLHttpRequest z-index 事件冒泡 事件绑定 内容发布时间 图片加载 大写 字符串 封装ajax 广告屏蔽 批量修改图层名称 水平垂直居中 注册码 特殊符号 百度 空元素 站长平台 网页快照 负边界 递减 随机数 首字母

友情链接

  • 蔡甸新闻网
©2025 Yuuk的博客 | 鄂ICP备13014750号-9