Masonry ImagesLoaded Infinitescroll 自动分页图片预载瀑布流实现

MVC4
+Masonry+ImagesLoaded+Infinitescroll
自动分页+图片预载瀑布流实现
Masonry 下载：/
所需文件：masonry.pkgd.min.js
$(“#container”).masonry({
//options 设置选项
itemSelector : “.item”, //子类元素选择器
columnWidth : 240 ,//一列的宽度，包括边距 220+10+10
isAnimated:true, //使用jquery的布局变化，是否启用动画效果
animationOptions:{
//jquery animate属性，动画效果选项。

比如渐变效果 Object {queue: false, duration: 500 } },
gutterWidth:0,//列的间隙
isFitWidth:true,//自适应宽度
isResizable:true,// 是否可调整大小
isRTL:false,//使用从右到左的布局
});
Imagesloaded下载：http://desandro.github.io/imagesloaded/
所需文件：imagesloaded.pkgd.min.js
var imgLoad = imagesLoaded('#container');
imgLoad.on( 'always', function() {
console.log( imgLoad.images.length + ' images loaded' );
//detect which image is broken
for( var i = 0, len = imgLoad.images.length; i < len; i++ ) {
var image = imgLoad.images[i];
var result = image.isLoaded ? 'loaded' : 'broken';
console.log( 'image is ' + result + ' for ' + image.img.src );
}
});
infinite-scroll下载：https:///paulirish/infinite-scroll
所需文件：jquery.infinitescroll.js
$('#content').infinitescroll({
navSelector :"div.navigation", //导航的选择器，会被隐藏
nextSelector : "div.navigation a:first",//包含下一页链接的选择器
itemSelector : "#content div.post",//你将要取回的选项(内容块)
debug : true, //启用调试信息
loadingImg :"/img/loading.gif", //加载的时候显示的图片
//默认采用："/loading.gif"
animate : true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有 extraScrollPx: 50, //滚动条距离底部多少像素的时候开始加载，默认150
bufferPx : 40,//载入信息的显示时间，时间越大，载入信息显示时间越短
errorCallback: function(){},//当出错的时候，比如404页面的时候执行的函数
localMode : true //是否允许载入具有相同函数的页面，默认为false
},function(arrayOfNewElems){
//程序执行完的回调函数
});
View：News.cshtml
<div id="masonry-single">
<div id="masonry-container">
@foreach (var iteminModel.NewsItems)
{
<div class="post">
<div class="newpicis-loading">
<a href="@Url.RouteUrl("NewsItem", new {SeName =
item.SeName })"><img src="@item.DefaultPictureModel.ImageUrl" title="@item.Title" alt ="@item.Title" class="postimg"></a>
</div>
<div class="newtitle">
@item.Title
</div>
<div class="newtext">
@Html.Raw(item.Short)
</div>
<div class="newtarg">
<span>@item.CreatedOn.ToString("D")</span>
<a href="@Url.RouteUrl("NewsItem", new {SeName =
item.SeName })" class="read-more" title="@item.Title">
@T("News.MoreInfo")</a>
</div>
<div class="clear"></div>
</div>
}
</div>
@Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber") </div>
样式：Css:
#masonry-container .post {
width: 230px;
border: #ccc 1px solid;
text-align: justify;
margin: 0px 20px 20px 0px;
background: #e2e2e2;
font-size: 12px;
-webkit-box-shadow: 0 1px 3px #ccc;
box-shadow: 0 1px 3px #ccc;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
float: left;
}
#masonry-container .post:hover {
-webkit-box-shadow: 0 0 3px #E3BB4D; box-shadow: 0 0 3px #E3BB4D;
}
#masonry-container .post .newpic {
width: 228px;
overflow:hidden;
}
#masonry-container .post:hover .newpic { opacity: .9;
}
.post .newpic .postimg {
width: 228px;
overflow:hidden;
}
#masonry-container .post .newtitle {
background-color:#fff;
line-height:20px;
font-weight:bold;
font-size:14px;
color:#3F709E;
padding:10px 10px 0px 10px;
}
#masonry-container .post .newtext { background-color:#fff;
padding:0px 10px 10px 10px;
line-height:20px;
}
#masonry-container .post .newtarg { background-color:#eee;
padding:10px;
line-height:20px;
border-top:1px #ccc solid;
}
.newtarg a{
float:right;
border: #ccc 1px solid;
display:block;
width:40px;
text-align:center;
#masonry-single ul.pagination {
display:none;
}
#infscr-loading {
bottom: -30px;
height: 20px;
left: 45%;
line-height: 20px;
position: absolute;
text-align: center;
width: 120px;
z-index: 100;
}
#masonry-container .post .newpic img{ width: 228px;
}
#masonry-container .post .newpic {
width: 228px;
display: block;
background-color: #fff;
background-position: center center; background-repeat: no-repeat;
#masonry-container .post .is-loading {
background-color: #fff;
background-image: url('../images/loader.gif');
}
#masonry-container .post .is-broken {
background-image: url('http://desandro.github.io/imagesloaded/assets/broken.png'); background-color: #be3730;
width: 120px;
}
#masonry-container .post .is-loading img,
#masonry-container .post .is-broken img {
opacity: 0;
}
Controller：NewsController
public ActionResultList(NewsPagingFilteringModelcommand)
{
if(!_newsSettings.Enabled)
returnRedirectToRoute("HomePage");
varmodel = new 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 = new 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://desandro.github.io/imagesloaded/
$container.imagesLoaded(function () {
$container.masonry({
singleMode: true,
animate: true,
itemSelector: '.post'
});
}).progress(onProgress);//加载后触发
}
// 每个项目加载后触发
functiononProgress(imgLoad, image) {
var$item = $(image.img).parent().parent();
$item.removeClass('is-loading');
if(!image.isLoaded) {
$item.addClass('is-broken');
}
}
//总分页数
vartotalPages = @Model.PagingFilteringContext.TotalPages;
initial_masonry();
$('.post').fadeIn();
var sp =1
$container.infinitescroll({
navSelector: ".pagination",
nextSelector: ".paginationa",
itemSelector: ".post",
loading: {
img: "/Themes/Default/Content/images/masonry_loading_1.gif", msgText: ' ',
finishedMsg: ' ',
finished: function () {
sp++;
if (sp== totalPages) {
$(".pagination").remove();
$("#infscr-loading").hide();
$(window).unbind('.infscr');
} else if (sp>= 10) {
$(".pagination").show();
}
}
},
errorCallback: function () {
$("#page").show();
}
},
function(newElements) {
var$newElems = $(newElements);
$container.masonry('appended',$newElems, false); $newElems.fadeIn();
initial_masonry();
return;
});
//异步装载列表
functionlists(p) {
$.ajax({
cache: false,
url: "/News/AxaxList?PageNumber=" + p,
dataType: 'json',
type: 'get',
success: function (j){
if(j.data) {
var$boxes = $(getList(j.data));
$container.append($boxes).masonry('appended',$boxes);
}
},
error: function () {
//
}
});
};
});
//填充模板
functiongetList(data) {
varboxes = [];
for (var i =0; i < data.length; i++) {
boxes.push('<divclass="post"><div
class="newpic"><imgsrc="' +data[i].DefaultPictureModel.ImageUrl + '"title="' +data[i].Title + '" alt="' +data[i].Title + '"></div><divclass="newtext">' + data[i].Short
+ '</div><divclass="newtarg"><span>' +data[i].CreatedOn + '</span><a
href="#"class="read-more">详情</a></div><divclass="clear"></div></div>');
}
//把数组转成字符串 returnboxes.join(""); };
//-->
</script>。