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

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

2、onOptions:/jquery animate属性，动画效果选项。比如渐变效果Object queue: false, duration: 500 ,gutterWidth:0,/列的间隙isFitWidth:true,/自适应宽度isResizable:true,/是否可调整大小isRTL:false,/使用从右到左的布局);Imagesloaded下载：http:/desandro.github.io/imagesloaded/所需文件：imagesloaded.pkgd.min.jsvar imgLoad = imagesLoaded(#container);imgLoad.on(

3、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.imagesi;var result = image.isLoaded ? loaded : broken;console.log( image is + result + for + image.img.src ); );infinite

4、-scroll下载：所需文件：jquery.infinitescroll.js$(#content).infinitescroll(navSelector :div.navigation, /导航的选择器，会被隐藏nextSelector : div.navigation a:first,/包含下一页链接的选择器itemSelector : #content div.post,/你将要取回的选项(内容块)debug : true, /启用调试信息loadingImg :/img/loading.gif, /加载的时候显示的图片/默认采用：http:/www.infinite-animate :

5、 true, /当有新数据加载进来的时候，页面是否有动画效果，默认没有extraScrollPx: 50, /滚动条距离底部多少像素的时候开始加载，默认150bufferPx : 40,/载入信息的显示时间，时间越大，载入信息显示时间越短errorCallback: function(),/当出错的时候，比如404页面的时候执行的函数localMode : true /是否允许载入具有相同函数的页面，默认为false,function(arrayOfNewElems) /程序执行完的回调函数);View：News.cshtmlforeach(variteminModel.NewsItems)

6、item.TitleHtml.Raw(item.Short)item.CreatedOn.ToString(D)T(News.MoreInfo) Html.Pager(Model.PagingFilteringContext).QueryParam(pagenumber)样式：Css:#masonry-container.postwidth:230px;border:#ccc1pxsolid;text-align:justify;margin:0px20px20px0px;background:#e2e2e2;font-size:12px;-webkit-box-shadow:01px3px#

7、ccc;box-shadow:01px3px#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:003px#E3BB4D;box-shadow:003px#E3BB4D;#masonry-container.post.newpicwidth:228px;overflow:hidden;#masonry-container.post:hover.newpicopa

8、city:.9;.post.newpic.postimgwidth:228px;overflow:hidden;#masonry-container.post.newtitlebackground-color:#fff;line-height:20px;font-weight:bold;font-size:14px;color:#3F709E; padding:10px10px0px10px;#masonry-container.post.newtextbackground-color:#fff;padding:0px10px10px10px;line-height:20px;#masonry

9、-container.post.newtargbackground-color:#eee;padding:10px;line-height:20px;border-top:1px#cccsolid;.newtargafloat:right;border:#ccc1pxsolid;display:block;width:40px;text-align:center;#masonry-singleul.paginationdisplay:none;#infscr-loadingbottom:-30px;height:20px;left:45%;line-height:20px;position:a

10、bsolute;text-align:center;width:120px;z-index:100;#masonry-container.post.newpicimgwidth:228px;#masonry-container.post.newpicwidth:228px;display:block;background-color:#fff;background-position:centercenter;background-repeat:no-repeat;#masonry-container.post.is-loadingbackground-color:#fff;background-image:url(./images/loader.gif);#masonry-container.post.is-brokenbackground-image:url(http:/desandro.github.io/imagesloaded/assets/broken.png);background-color:#be3730;width:120px;#masonry-conta