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

十度 JQuery 2016年01月04日 收藏

首先在页面中引入

  1. <script src=”jquery-1.7.1.min.js”></script>
  2. <script src=”jquery.masonry.min.js”></script>
  3. <script src=”jquery.infinitescroll.js”></script>

排列body中的内容:

  1. <BODY>  
  2.     <div id="container">
  3.       <div>a a a a a  a</div>
  4.       <div>a a a a a  a</div>
  5.       <div>a a a a a  a</div>
  6.       <div>a a a a a  a</div>
  7.   </div>
  8. </BODY>


在js中调用插件:

  1. <script type="text/javascript">
  2.   $(function(){
  3.     $('#container').masonry({
  4.       // options 设置选项
  5.       itemSelector : '.item',//class 选择器
  6.       columnWidth : 240 ,//一列的宽度 Integer
  7.           isAnimated:true,//使用jquery的布局变化  Boolean
  8.           animationOptions:{
  9.             //jquery animate属性 渐变效果  Object { queue: false, duration: 500 }
  10.           },
  11.           gutterWidth:0,//列的间隙 Integer
  12.           isFitWidth:true,// 适应宽度   Boolean
  13.           isResizableL:true,// 是否可调整大小 Boolean
  14.           isRTL:false,//使用从右到左的布局 Boolean
  15.   });
  16. });
  17. </script>

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

  1. <script>
  2. var $container = $('#container');
  3. $container.imagesLoaded(function(){
  4.   $container.masonry({
  5.     itemSelector : '.item',
  6.     columnWidth : 240
  7.   });
  8. });
  9. </script>


调用masonry插件的方法格式是:$(‘#container’).masonry( ‘methodName’, [optionalParameters] )

例如:
.masonry( ‘appended’, $content, isAnimatedFromBottom )//触发添加到container的项目的布


  1. .masonry( destroy )// 完全移除masonry的功能 返回到元素预初始化状态
  2. .masonry( layout’, $items, callback )// 指定项目的布局
  3. .masonry( option’, options ) //设置option
  4. .masonry( reloadItems ) //重新聚合所有项目以当前的顺序
  5. .masonry( reload ) //用于预先考虑或者插入项目 .masonry( ‘reloadItems’ )的简化版
  6. .masonry( remove’, $items ) //从masonry实例或dom中移除项目

调用infinitescroll插件:

  1. $container.infinitescroll({
  2.         navSelector : '#page-nav', //分页导航的选择器
  3.         nextSelector : '#page-nav a', //下页连接的选择器
  4.         itemSelector : '.box', //你要检索的所有项目的选择器
  5.         loading: {
  6.                 finishedMsg: 'No more pages to load.',//结束显示信息
  7.                 img: 'http://i.imgur.com/6RMhx.gif'//loading图片
  8.         }
  9. },
  10. //作为回调函数触发masonry
  11. function( newElements ) {
  12. // 当加载时隐藏所有新项目
  13.         var $newElems = $( newElements ).css({ opacity: 0 });
  14. // 在添加到masonry布局之前保证图片载入
  15.         $newElems.imagesLoaded(function(){
  16. // 现在可以显示所有的元素了
  17.         $newElems.animate({ opacity: 1 });
  18.         $container.masonry( 'appended', $newElems, true );
  19.         });
  20. }
  21. );