JS瀑布流

JS：

(function( $ ,undefined){
	  
  /**
   * 绑定滚动对象
   * @param options 自定义配置参数
   * */
  $.fn.scrollPagination = function(options) {
	  //覆盖默认参数对象
	  var opts = $.extend($.fn.scrollPagination.defaults, options);
	  //当前参考对象
	  var target = opts.scrollTarget;
	  //如果参考对象未设置，则直接绑定当前对象
	  if (target == null){
		  console.log('未绑定监听对象');
		  return;
	  }	  
	  //初始化滚动对象
	  return this.each(function() {
		  $.fn.scrollPagination.init($(this), opts);
	  });
  };
  
  /**
   * 开始滚动
   * */
  $.fn.startScrollPagination = function(){
	  return this.each(function() {
	 	$(this).attr('scrollPagination', 'enabled');
	  });	  
  };
  
  /**
   * 停止滚动
   * */
  $.fn.stopScrollPagination = function(){
	  return this.each(function() {
	 	$(this).attr('scrollPagination', 'disabled');
	  });	  
  };
  
  /**
   * 加锁
   * */
  $.fn.lockScrollPagination = function(){
	  return this.each(function() {
	 	$(this).attr('scrollPagination', 'block');
	  });	  
  };
  
  /**
   * 解锁
   * */
  $.fn.unlockScrollPagination = function(){
	  return this.each(function() {
	 	$(this).attr('scrollPagination', 'unlock');
	  });	  
  };
  
  /**
   * 加载数据
   * @param obj 当前对象
   * @param opts 当前配置
   * */
  $.fn.scrollPagination.loadContent = function(obj, opts){
	 //参考对象 
	 var target = opts.scrollTarget;
	 //当前对象的高度+滚动的高度+临界高度>=文档高度时加载数据	 
	 if ($(target).scrollTop()+opts.heightOffset+$(target).height() >= $(obj).height()){
		 //判断是否有锁
		 if($(obj).attr('scrollPagination') == 'block' || $(obj).attr('scrollPagination') == 'disabled'){
			 return ;
		 }
		 //加锁
		 $(obj).lockScrollPagination();
		 //执行前置函数
		 if (opts.beforeLoad != null){
			opts.beforeLoad();
		 }
		 //请求页数
		 opts.currentPage ++;
		 //请求数据
		 $.ajax({
			  type: 'POST',
			  url: opts.contentPage + '?page='+opts.currentPage,
			  data: opts.contentData,
			  dataType: 'html',
			  success: function(html){
				  //加载数据
				  $(obj).append(html);
				  //标记当前对象的子元素为已加载
				  $(obj).children().attr('rel', 'loaded');
				  //解锁
				  $(obj).unlockScrollPagination();
				  //执行后置函数
				  if (opts.afterLoad != null){
					  opts.afterLoad();
				  }
			  }
		 });
	 }	 
  };

  /**
   * 初始化
   * @param obj 绑定对象
   * @param opts 绑定参数
   * */
  $.fn.scrollPagination.init = function(obj, opts){
	  //当前对象所参考的对象
	  var target = opts.scrollTarget;
	  //设置当前对象可用
	  $(obj).attr('scrollPagination', 'enabled');
	  //绑定当前对象滚动事件
	  $(target).scroll(function(event){
		  if ($(obj).attr('scrollPagination') == 'enabled'){
			  //当前对象可用时,执行滚动处理
			  $.fn.scrollPagination.loadContent(obj, opts);
		  }else {
			  //阻止事件冒泡，停止滚动
			  event.stopPropagation();
		  }
	  });
 };
 
 /**
  * 默认参数
  * */
 $.fn.scrollPagination.defaults = {
	 'currentPage' : 1,			//当前页数
  	 'contentPage' : null,		//请求地址
 	 'contentData' : {},		//请求参数
	 'beforeLoad': null,		//前置函数
	 'afterLoad': null,			//后置函数
	 'scrollTarget': null,		//滚动参考对象
	 'heightOffset': 30			//发起请求界限
 };	

})(jQuery );

使用方法如下：

HTML：

<ul id="log-list"></ul>


js:

$('#log-list').scrollPagination({
    'contentPage': url,
    'contentData': {ajax:"loadnext"},
    'scrollTarget': 'body',
    'heightOffset': 30,
    'beforeLoad': function(){					
        $('#loading').show();	
    },
    'afterLoad': function(){
        $('#loading').hide();
        if ($('#log-list').children().size() >= count){
            $('#log-list').stopScrollPagination();
        } 
    }
});