PHPJquery与ajax相结合实现下拉淡出瀑布流效果(无需插件).pdfVIP

这篇文章主要介绍了 PHP+Jquery 与 ajax 相结合实现下拉淡出瀑布流效果【无需插件】 的相关资料 ,需要的朋友可以参考下 导读： 瀑布流， 又称瀑布流式布局。 是比较流行的一种网站页面布局， 视觉表现为参差不齐的 多栏布局， 随着页面滚动条向下滚动， 这种布局还会不断加载数据块并附加至当前尾部。 最 早采用此布局的网站是 Pinterest，逐渐在国内流行开来。 国内大多数清新站基本为这类风格， 像花瓣网、蘑菇街、美丽说等。 直接上代码，整段代码分为前后两段代码，具体代码如下所示。 前台： lt;?php lt;brgt;$category=$this-gt;getMyVal(category,$_GET);lt;brgt;$xiaohuaList=Xiaohua:: model()-gt;getXiaohao($category); // 打 开 页 面 默 认 显 示 的 数 据 lt;brgt;?gt;lt;brgt;lt;brgt;lt;div id=waterfallgt; lt;?php foreach ($xiaohuaList as $xiaohua):?gt; lt;?php $q_id=$xiaohua-gt;id;?gt; lt;div class=cell m-bg item-h border_hgt; lt;div class=border-solid-b padding-b-5 text-centergt;lt;span class=g-bg glyphicon glyphicon-sunglasses margin-r-5 aria-hidden=truegt;lt;/spangt;lt;strong class=color-5 fx_t_lt;?php echo $q_id;?gt;gt;lt;?php echo CHtml::encode($xiaohua-gt;title);?gt;lt;/stronggt;lt;/divgt; lt;div class=padding-t-5 fx_c_lt;?php echo $q_id;?gt;gt;lt;?php echo $xiaohua-gt;content;?gt;lt;/divgt; lt;div class=padding-t-5 text-rightgt;lt;span onclick=fx(lt;?php echo $q_id;?gt;); class=fx cursor_p data-id=lt;?php echo $q_id;?gt;gt;lt;span class=g-bg glyphicon glyphicon-share-alt margin-r-5 aria-hidden=truegt;lt;/spangt; 分 享 lt;/spangt;lt;/divgt; lt;/divgt; lt;?php endforeach;?gt; lt;/divgt; lt;scriptgt; var opt={ getResource:function(index,render){//index 为已加载次数 ,render 为渲染接口函数 ,接受一 个 dom 集合或 jquery 对象作为参数。通过 ajax 等异步方法得到的数据可以传入该