最近接了个单，页面需要瀑布流加上下拉无限加载，另外点击图片还要有灯箱效果。这种复杂程度的页面自己写显然毫无意义[重复造轮子不可取，另外这种程度的轮子造不出来...]
直接上现成的库。
瀑布流用”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);
}
);
