<script type="text/javascript">
$(document).ready(function () {
var $container = $('.list');
$container.imagesLoaded(function () {
$container.masonry({
itemSelector: '.box',
columnWidth: 5 //每两列之间的间隙为5像素
});
});
$container.infinitescroll({
navSelector: '#page-nav', // 选择的分页导航
nextSelector: '#page-nav a', // 选择的下一个链接到(第2页)
itemSelector: '.box', // 选择检索所有项目
animate: true,
extraScrollPx: 0,
loading: {
msgText: '正在加载',
finishedMsg: '数据已全部加载',
img: 'images/loading.gif'
}
}, function (newElements) {
// 隐藏新的项目,而他们正在加载
var $newElems = $(newElements).css({ opacity: 0 });
// 确保的图像装载增加砖石布局
$newElems.imagesLoaded(function () {
// 元素展示准备
$newElems.animate({ opacity: 1 });
$container.masonry('appended', $newElems, true);
});
});
});
</script>
/*加载的样式*/
#infscr-loading{ text-align:center; padding:10px 20px; opacity:0.8; filter:alpha(opacity=80); color:#333; font-size:13px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
#infscr-loading img{ height:20px;}
#infscr-loading{ /*position:fixed; bottom:0px; left:0px; width:100%; */ <span style="font-family: Arial, Helvetica, sans-serif;">text-align:center; z-index:9999;} /*瀑布流解释。加载注释*/</span>
*html #infscr-loading{ /*position:absolute; bottom:expression(eval(document.documentElement.scrollTop));*/} /*瀑布流解释。加载注释*/