jQuery向下滚动即时加载内容实现的瀑布流效果

下拉滚动条或鼠标滚轮滚动到页面底部时， 动态即时加载新内容。

后台用 json 传输数据， 示例程序中只写了示例数组。数据也只设置了两个属性， 需根据实际应用改写。

页面用了 ul li 做为容器， 每个 li 表示一列

<ul id="stage">  <li></li>  <li></li>  <li></li> PHP和Jquery和ajax实现下拉淡出瀑布流效果（无需插件）  <li></li> </ul> 

JS代码

/* @版本日期: 版本日期: 2012年4月11日 @著作权所有: 1024 intelligence ( http://www.1024i.com ) 获得使用本类库的许可, 您必须保留著作权声明信息. 报告漏洞，意见或建议, 请联系 Lou Barnes(iua1024@gmail.com) */ $(document).ready(function(){  loadMore(); }); $(window).scroll(function(){  // 当滚动到最底部以上100像素时， 加载新内容  if ($(document).height() - $(this).scrollTop() - $(this).height()<100) loadMore(); }); function loadMore() {  $.ajax({   url : 'data.php',   dataType : 'json',   success : function(json)   {    if(typeof json == 'object')    {     var oProduct, $row, iHeight, iTempHeight;     for(var i=0, l=json.length; i<l; i++)     {      oProduct = json[i];      // 找出当前高度最小的列, 新内容添加到该列      iHeight = -1;      $('#stage li').each(function(){       iTempHeight = Number( $(this).height() );       if(iHeight==-1 || iHeight>iTempHeight)       {        iHeight = iTempHeight;        $row = $(this);       }      });      $item = $('<div><img src="'+oProduct.image+'" border="0" ><br />'+oProduct.title+'</div>').hide();      $row.append($item);      $item.fadeIn();     }    }   }  }); } 

下面再给大家分享一段代码：PHP Jquery和ajax相结合实现下拉淡出瀑布流效果

我的风格，废话不多说，感兴趣的朋友直接看下文代码： 

前台：

<br><?php <br>$category=$this->getMyVal('category',$_GET);<br>$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打开页面默认显示的数据<br>?><br><br><div id="waterfall"><?php foreach ($xiaohuaList as $xiaohua):?><?php $q_id=$xiaohua->id;?><div class="cell m-bg item-h border_h"><div class="border-solid-b padding-b-5 text-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"></span><strong class="color-5 fx_t_<?php echo $q_id;?>"><?php echo CHtml::encode($xiaohua->title);?></strong></div><div class="padding-t-5 fx_c_<?php echo $q_id;?>"><?php echo $xiaohua->content;?></div><div class="padding-t-5 text-right"><span onclick="fx(<?php echo $q_id;?>);" class="fx cursor_p" data-id="<?php echo $q_id;?>"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true"></span>分享</span></div></div><?php endforeach;?></div><script>var opt={getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem)var html='';var _url='<?php echo $this->createUrl('listXiaohua');?>';$.ajax({type: "get",url: _url,dataType : "json",async:false,success: function(data){for( var i in data){var q_id=data[i].id;html+='<div class="cell m-bg item-h border_h"><div class="border-solid-b padding-b-5 text-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"></span><strong class="color-5 fx_t_'+q_id+'">'+data[i].title+'</strong></div><div class="padding-t-5 fx_c_'+q_id+'">'+data[i].content+'</div>'+'<div class="padding-t-5 text-right"><span onclick="fx('+q_id+');" class="fx cursor_p" data-id="'+q_id+'"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true"></span>分享</span></div></div>';}}});return $(html);},column_width:376,column_space:10,auto_imgHeight:true,insert_type:1}$('#waterfall').waterfall(opt);</script>