jquery实现瀑布流

最新推荐文章于 2024-10-01 18:51:18 发布

chentian2087

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量103

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/ducaiwei/blog/187299

版权

接着上一篇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就可以轻松实现瀑布流了！

转载于:https://my.oschina.net/ducaiwei/blog/187299