jquery实现瀑布流
接着上一篇masonry的用发之后继续讲解jquery瀑布流的实现。现在主要讲一下infinitescroll.js的使用。只要理解了infinitescroll的代码就容易明白怎么调用了。下面是我写的一段使用实例。
<body>
<div id="container">
<div class="item">哈哈</div>
<div class="item">呵呵</div>
<div class="item">嘻嘻</div>
<div class="item">嘿嘿</div>
</div>
$container.infinitescroll({
navSelector : '#page-nav', //分页导航的选择器
nextSelector : '#page-nav a', //下页连接的选择器
itemSelector : '.box', //你要检索的所有项目的选择器
loading: {
finishedMsg: 'No more pages to load.',//结束显示信息
img: 'http://i.imgur.com/6RMhx.gif'//loading图片
}
},
//作为回调函数触发masonry
function( newElements ) {
// 当加载时隐藏所有新项目
var $newElems = $( newElements ).css({ opacity: 0 });
// 在添加到masonry布局之前保证图片载入
$newElems.imagesLoaded(function(){
// 现在可以显示所有的元素了
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
}
);
</body>
结合上一篇的masonry就可以轻松实现瀑布流了！