jQUery 中masonry与infinitescroll结合实现瀑布流，下拉加载

Myth丶恋晨 2021-09-18 02:06 288阅读 0赞

首先在页面中引入

排列body中的内容:  
  
  
<BODY>    
    <div id="container">  
      <div>a a a a a  a</div>  
      <div>a a a a a  a</div>  
      <div>a a a a a  a</div>  
      <div>a a a a a  a</div>  
  </div>  
</BODY>  
在js中调用插件：

当需要排列图片div时：  
需要调用：

调用masonry插件的方法格式是：$(‘\#container’).masonry( ‘methodName’, \[optionalParameters\] )  
  
  
例如：  
.masonry( ‘appended’, $content, isAnimatedFromBottom )//触发添加到container的项目的布  
  
  
局.masonry( ‘destroy’ )// 完全移除masonry的功能 返回到元素预初始化状态  
.masonry( ‘layout’, $items, callback )// 指定项目的布局  
.masonry( ‘option’, options ) //设置option  
.masonry( ‘reloadItems’ ) //重新聚合所有项目以当前的顺序  
.masonry( ‘reload’ ) //用于预先考虑或者插入项目 .masonry( ‘reloadItems’ )的简化版  
.masonry( ‘remove’, $items ) //从masonry实例或dom中移除项目  
  
  
调用infinitescroll插件：

$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 );
            });
    }
    );