Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现.docx
《Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现.docx》由会员分享，可在线阅读，更多相关《Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现.docx（11页珍藏版）》请在冰豆网上搜索。
MasonryImagesLoadedInfinitescroll自动分页图片预载瀑布流实现
ASP.NETMVC4+Masonry+ImagesLoaded+Infinitescroll
自动分页+图片预载 瀑布流实现
Masonry 下载：
所需文件：
masonry.pkgd.min.js
$（“#container”）.masonry（{
//options 设置选项
itemSelector:
“.item”,//子类元素选择器
columnWidth:
240,//一列的宽度 ，包括边距 220+10+10
isAnimated:
true,//使用jquery的布局变化，是否启用动画效果
animationOptions:
{
//jqueryanimate属性，动画效果选项。
比如渐变效果 Object{queue:
false,duration:
500}
},
gutterWidth:
0,//列的间隙
isFitWidth:
true,//自适应宽度
isResizable:
true,// 是否可调整大小
isRTL:
false,//使用从右到左的布局
}）;
Imagesloaded下载：
http:
//desandro.github.io/imagesloaded/
所需文件：
imagesloaded.pkgd.min.js
varimgLoad=imagesLoaded（'#container'）;
imgLoad.on（'always',function（）{
console.log（imgLoad.images.length+'imagesloaded'）;
//detectwhichimageisbroken
for（vari=0,len=imgLoad.images.length;i varimage=imgLoad.images[i];
varresult=image.isLoaded?
'loaded':
'broken';
console.log（'imageis'+result+'for'+image.img.src）;
}
}）;
infinite-scroll下载：
所需文件：
jquery.infinitescroll.js
$（'#content'）.infinitescroll（{
navSelector :
"div.navigation",//导航的选择器，会被隐藏
nextSelector:
"div.navigationa:
first",//包含下一页链接的选择器
itemSelector:
"#contentdiv.post",//你将要取回的选项（内容块）
debug :
true,//启用调试信息
loadingImg :
"/img/loading.gif",//加载的时候显示的图片
//默认采用：
"http:
//www.infinite-
animate :
true,//当有新数据加载进来的时候，页面是否有动画效果，默认没有
extraScrollPx:
50,//滚动条距离底部多少像素的时候开始加载，默认150
bufferPx :
40,//载入信息的显示时间，时间越大，载入信息显示时间越短
errorCallback:
function（）{},//当出错的时候，比如404页面的时候执行的函数
localMode :
true//是否允许载入具有相同函数的页面，默认为false
},function（arrayOfNewElems）{
//程序执行完的回调函数
}）;
View：
News.cshtml
@foreach （var iteminModel.NewsItems）
{
升级会员 