jQUery 中masonry与infinitescroll团结 实现瀑布流,下拉加载

首先在页面中引入

<script src=http://blog.csdn.net/kof820/article/details/8764715/”jquery-1.7.1.min.js”></script> <script src=http://blog.csdn.net/kof820/article/details/8764715/”jquery.masonry.min.js”></script> <script src=http://blog.csdn.net/kof820/article/details/8764715/”jquery.infinitescroll.js”></script>


分列body中的内容:


<BODY>  
    <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>a a a a a  a</div>
  </div>
</BODY>
在js中挪用插件:

<script type="text/javascript"> $(function(){ $('#container').masonry({ // options 配置选项 itemSelector : '.item',//class 选择器 columnWidth : 240 ,//一列的宽度 Integer isAnimated:true,//利用jquery的机关变革 Boolean animationOptions:{ //jquery animate属性 渐变结果 Object { queue: false, duration: 500 } }, gutterWidth:0,//列的间隙 Integer isFitWidth:true,// 适应宽度 Boolean isResizableL:true,// 是否可调解巨细 Boolean isRTL:false,//利用从右到左的机关 Boolean }); }); </script>


当需要分列图片div时:
需要挪用:


<script> var $container = $('#container'); $container.imagesLoaded(function(){ $container.masonry({ itemSelector : '.item', columnWidth : 240 }); }); </script>

挪用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 ); }); } );

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/8351.html