Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现Word文档格式.docx
《Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现Word文档格式.docx》由会员分享，可在线阅读，更多相关《Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现Word文档格式.docx（13页珍藏版）》请在冰点文库上搜索。
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<
len;
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"
//包含下一页链接的选择器
#contentdiv.post"
//你将要取回的选项（内容块）
debug
true,//启用调试信息
loadingImg
/img/loading.gif"
//加载的时候显示的图片
//默认采用：
//www.infinite-
animate
true,//当有新数据加载进来的时候，页面是否有动画效果，默认没有
extraScrollPx:
50,//滚动条距离底部多少像素的时候开始加载，默认150
bufferPx
40,//载入信息的显示时间，时间越大，载入信息显示时间越短
errorCallback:
function（）{},//当出错的时候，比如404页面的时候执行的函数
localMode
true//是否允许载入具有相同函数的页面，默认为false
},function（arrayOfNewElems）{
//程序执行完的回调函数
View：
News.cshtml
<
div
id="
masonry-single"
>
masonry-container"
@foreach
（var
iteminModel.NewsItems）
{
class="
post"
newpicis-loading"
a
href="
@Url.RouteUrl（"
NewsItem"
new
{SeName=item.SeName}）"
img
src="
@item.DefaultPictureModel.ImageUrl"
title="
@item.Title"
alt="
postimg"
/a>
/div>
newtitle"
@item.Title
newtext"
@Html.Raw（item.Short）
newtarg"
span>
@item.CreatedOn.ToString（"
D"
）<
/span>
read-more"
@T（"
News.MoreInfo"
clear"
@Html.Pager（Model.PagingFilteringContext）.QueryParam（"
pagenumber"
）
样式：
Css:
#masonry-container
.post
width:
230px;
border:
#ccc
1px
solid;
text-align:
justify;
margin:
0px
20px
0px;
background:
#e2e2e2;
font-size:
12px;
-webkit-box-shadow:
0
3px
#ccc;
box-shadow:
-webkit-transition:
0.3s;
-moz-transition:
-o-transition:
transition:
float:
left;
}
.post:
hover
#E3BB4D;
.newpic
228px;
overflow:
hidden;
opacity:
.9;
.postimg
.newtitle
background-color:
#fff;
line-height:
20px;
font-weight:
bold;
14px;
color:
#3F709E;
padding:
10px
10px;
.newtext
.newtarg
#eee;
border-top:
a{
right;
display:
block;
40px;
center;
#masonry-single
ul.pagination
none;
#infscr-loading
bottom:
-30px;
height:
left:
45%;
position:
absolute;
120px;
z-index:
100;
img{
background-position:
center
background-repeat:
no-repeat;
.is-loading
background-image:
url（'
../images/loader.gif'
.is-broken
//desandro.github.io/imagesloaded/assets/broken.png'
#be3730;
img,
0;
Controller：
NewsController
public
ActionResultList（NewsPagingFilteringModelcommand）
if（!
_newsSettings.Enabled）
returnRedirectToRoute（"
HomePage"
varmodel=
NewsItemListModel（）;
model.WorkingLanguageId=_workContext.WorkingLanguage.Id;
if（command.PageSize<
=0）command.PageSize=_newsSettings.NewsArchivePageSize;
if（command.PageNumber<
=0）command.PageNumber=1;
varnewsItems=_newsService.GetAllNews（
_workContext.WorkingLanguage.Id,
_storeContext.CurrentStore.Id,
command.PageNumber-1,
command.PageSize）;
model.PagingFilteringContext.LoadPagedList（newsItems）;
model.NewsItems=newsItems
.Select（x=>
varnewsModel=
NewsItemModel（）;
PrepareNewsItemModel（newsModel,x,
false）;
returnnewsModel;
}）
.ToList（）;
returnView（model）;
Js
script
type="
text/javascript"
!
--//
$（function
（）{
//呈现容器
var$container=$（'
#masonry-container'
//初始masonry
functioninitial_masonry（）{
//获取容器中的所有.post集合
varitems=$container.children（）.attr（'
class'
'
post'
//$container.prepend（$（items））;
//如果项目中包含有图片时，图片为空将会导致项目元素重叠
//而imagesLoaded很好的解决了这个问题，当所有子图像已被加载后触发回调
//关于“imagesLoaded”可以参考http:
$container.imagesLoaded（function
$container.masonry（{
singleMode:
true,
animate:
itemSelector:
.post'
}）;
}）.progress（onProgress）;
//加载后触发
//
每个项目加载后触发
functiononProgress（imgLoad,image）{
var$item=$（image.img）.parent（）.parent（）;
$item.removeClass（'
is-loading'
image.isLoaded）{
$item.addClass（'
is-broken'
//总分页数
vartotalPages=
@Model.PagingFilteringContext.TotalPages;
initial_masonry（）;
$（'
）.fadeIn（）;
var
sp=1
$container.infinitescroll（{
navSelector:
.pagination"
nextSelector:
.paginationa"
.post"
loading:
img:
/Themes/Default/Content/images/masonry_loading_1.gif"
msgText:
finishedMsg:
finished:
function
sp++;
if
（sp==totalPages）{
$（"
）.remove（）;
#infscr-loading"
）.hide（）;
$（window）.unbind（'
.infscr'
}
else
（sp>
=10）{
）.show（）;
},
errorCallback:
#page"
function（newElements）{
var$newElems=$（newElements）;
$container.masonry（'
appended'
$newElems,
$newElems.fadeIn（）;
return;
//异步装载列表
functionlists（p）{
$.ajax（{
cache:
false,
url:
/News/AxaxList?
PageNumber="
+p,
dataType:
json'
type:
get'
success:
（j）{
if（j.data）{
var$boxes=$（getList（j.data））;
$container.append（$boxes）.masonry（'
$boxes）;
error:
//
};
//填充模板
functiongetList（data）{
varboxes=[];
for
i=0;
data.length;
i++）{
boxes.push（'
divclass="
divclass="
newpic"
imgsrc="
+data[i].DefaultPictureModel.ImageUrl+
+data[i].Title+
alt="
+data[i].Short+
+data[i].CreatedOn+
ahref="
#"
详情<
//把数组转成字符串
returnboxes.join（"
//-->
/script>
升级会员 