像嘀咕网一样，图片和回复异步以图片墙的方式加载到页面的方法。需要引入附件中的包：
首先在photo.html中显示第一页的内容，图片墙的最外面要有如下div
<div style="visibility: visible; position: relative; " id="container" class="waterfall_wrap masonry">
然后内部的每一个图片单元都要在<div class="pin layoutBox masonry-brick">内部。
js包会自动识别pin的类来进行检测。
加载第二页时，js会识别<nav id="page-nav"> <a href="page2.html"></a> </nav>（这个标签放哪里都可以）
然后查到href属性，把里面的数值自动加1进行触发，加载里面的内容。
当然page2.html里面的内容也是有要求的，最外层div要是：<div style="visibility: visible; position: relative; " id="container" class="waterfall_wrap masonry">
然后里面的单元也要是<div class="pin layoutBox masonry-brick">。
在href里是不能调用javascript函数的，要是想触发action异步把数据加载上来，
在href属性里写上action的名字，如：/zone/myphotoPage.action?pager.offset=2
js会自动把里面的数字加1进行触发。
加载新的div时会触发如下函数：
$container.infinitescroll({
navSelector : '#page-nav', // selector for the paged navigation
nextSelector : '#page-nav a', // selector for the NEXT link (to page 2)
itemSelector : '.pin', // selector for all items you'll retrieve
extraScrollPx: 50,
animate : true, //设置动画效果
loading: {
finishedMsg: '已经没有下页了.',
img: '${baseUploadHome}/system/6RMhx.gif'
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
});
其中一些参数是可变的
工具包下载地址：
http://download.csdn.net/detail/aaa1117a8w5s6d/4468994
转载自原文链接, 如需删除请联系管理员。
原文链接：图片墙瀑布式加载图片方法，转载请注明来源！