最近接了个单,页面需要瀑布流加上下拉无限加载,另外点击图片还要有灯箱效果。这种复杂程度的页面自己写显然毫无意义[重复造轮子不可取,另外这种程度的轮子造不出来...]
直接上现成的库。
瀑布流用”masonry“,下拉无限加载用”infinitescroll“,图片灯箱用”lightGallery“。
坑就在整合里面了。
masonry和infinitescroll一起使用有很多教程。
第一个坑就是下拉加载新出来的页面”lightGallery“没有效果。
查询搜索之后发现要在”infinitescroll“下拉加载成功后回调函数里面用”destroy“销毁再重新加载数据。
第二个坑是masonry在加载的时候有的图片加载的比较慢就会发生获取不到图片高度导致页面页面重叠的问题。这个问题还是在客户的网站上发现的,自己的测试站因为速度还可以根本没发现...
解决办法就是要先判断图片是否加载完成,等全部的图片加载完成后再去执行masonry瀑布流效果。
最后附上代码,三个库的js文件都要加载这个就不贴了,下面的是三个库直接的整合代码:
var $container = $('.img-wrap'); // masonry大容器 var t_img; // 定时器 var isLoad = true; // 控制变量 isImgLoad(function () { // 加载完成 setTimeout(function() { $container.masonry({ itemSelector: '.img-item', //masonry项目 columnWidth: '.img-item',//masonry宽度 percentPosition: true }); }, 100); }); function isImgLoad(callback) { $('.img').each(function () { //图片全部给"img"类名 if (this.height === 0) { isLoad = false; return false; } }); if (isLoad) { clearTimeout(t_img); callback(); } else { isLoad = true; t_img = setTimeout(function () { isImgLoad(callback); }, 500); } } $container.infinitescroll({ navSelector: "#npage", nextSelector: "#npage a", itemSelector: ".img-item", pixelsFromNavToBottom: 300, loading: { msgText: '我正在给力载入中...', finishedMsg: '已经全部看完了哦', }, }, function(newElements) { $(".img-wrap").data("lightGallery").destroy(true); createLightGallery(); var $newElems = $(newElements).css({ opacity: 0 }); setTimeout(function() { $newElems.animate({ opacity: 1 }); isImgLoad(function () { $container.masonry('appended', $newElems, true); }); }, 100); } );
相关推荐
- 记录瀑布流+下拉无限加载+lightbox页面踩的坑05-20
- swiper做导航栏时自动跳转至对应分类的代码12-07
- css实现的图片连续横向滚动效果07-31
- html图片和css背景图片哪个先开始加载?css占位图怎么操作?04-10
- css写三角形的原理和使用方法11-30
- 一个输入框调用多个搜索引擎的js代码08-17
- 一个纯html+css的下拉导航动画效果01-24
- JQ特效之:页面向上滚动时弹出模块06-09
- 比较简单易懂的跟随滚动侧栏模块 JQ+html+css03-25
- 一个页面可多处重复使用的简单tab标签jQuery代码01-11
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1vue3项目引入vant报错的错误原因和解决办法03-12
- 2天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 3zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 4天兴工作室2023双11活动:五折优惠券大放送11-05
- 5腾讯云2023双11活动:2H2G3M轻量服务器88一年限新用户11-05
- 6新老同享 阿里云2023双11活动:2核2G3M带宽云服务器99元/年!10-31
- 7天兴工作室zblog免登录付费阅读插件 支持支付宝微信支付虎皮椒支付10-09
- 8[已下线] 天兴工作室2023双节活动:五折优惠券09-29
- 951.la统计的js文件被劫持了会跳转违法网站09-27
- 标签聚合
- ×1swiper介绍×1zblogphp1.5bug×1发布时间×1idc×1zblog文章数×1时间戳×1zblog主题更更新×1立体主题×1zblog数据库配置×1Swiper文档×1主题安装×1自用主题2015版×1A5×12018×1读者墙×1登陆错误×1自用模板×1蓝色cms×1specified×122端口
最新评论
-
天兴工作室
01-19没听懂 你是要批量创建分类?这是插件的事情主题不会考虑的 -
访客
01-18分类一个一个设置太麻烦了。能不能在主题设置里添加对分类的设置。 -
天兴工作室
01-16没太理解你的需求,麻烦联系我们的在线qq2076496616提供订单号详细说明下需求 -
访客
01-16点击分类,能不能下面显示所有分类的名字。 -
天兴工作室
01-13多条件筛选很麻烦,主题不考虑加,有需求可以联系我定制