Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现Word格式.docx
- 文档编号:15352001
- 上传时间:2022-10-29
- 格式:DOCX
- 页数:11
- 大小:18.40KB
Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现Word格式.docx
《Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现Word格式.docx》由会员分享,可在线阅读,更多相关《Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现Word格式.docx(11页珍藏版)》请在冰豆网上搜索。
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<
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;
#masonry-conta
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现 自动 分页 图片 瀑布 实现
链接地址:https://www.bdocx.com/doc/15352001.html