有关于记录瀑布流+下拉无限加载+lightbox页面踩的坑的详细介绍，下边就和航海之王小编一起来看一下有关于记录瀑布流+下拉无限加载+lightbox页面踩的坑的经验吧
比来接了个单，页面需要瀑布流加上下拉无限加载，别的点击图片还要有灯箱效果。那种复杂水平的页面本身写显然毫无意义[反复造轮子不成取，别的那种水平的轮子造不出来...]
间接上现成的库。
（航海之王原创游戏攻略，转载备注航海之王:www.hhzw.com）瀑布流用”masonry“，下拉无限加载用”infinitescroll“，图片灯箱用”lightGallery“。
坑就在整合里面了。
masonry和infinitescroll一路利用有良多教程。
第一个坑就是下拉加载新出来的页面”lightGallery“没有效果。
（航海之王原创游戏攻略，转载备注航海之王:www.hhzw.com）查询搜刮之后发现要在”infinitescroll“下拉加载胜利后回调函数里面用”destroy“销毁再从头加载数据。
第二个坑是masonry在加载的时候有的图片加载的比力慢就会发作获取不到图片高度招致页面页面堆叠的问题。那个问题仍是在客户的网站上发现的，本身的测试站因为速度还能够底子没发现...
处理法子就是要先判断图片能否加载完成，等全数的图片加载完成后再去施行masonry瀑布流效果。
最初附上代码，三个库的js文件都要加载那个就不贴了，下面的是三个库间接的整合代码：
（航海之王原创游戏攻略，转载备注航海之王:www.hhzw.com）JavaScriptvar $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页面踩的坑的相信介绍了。如果需求更多经验文章请进入航海之王-www.hhzw.com
