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

PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果(无需插件) ‘category’,$_GET);lt;br$xiaohuaList=Xiaohua::model()-getXiaohao($category); //打开页面默认显示的数据lt;br?lt;brlt;brlt;div id=“waterfall” lt;?php foreach ($xiaohuaList as $xiaohua):? lt;?php $q_id=$xiaohua-id;? lt;div class=“cell m-bg item-h border_h” lt;div class=“border-solid-b padding-b-5 text-center”lt;span class=“g-bg glyphicon glyphicon-sunglasses margin-r-5” aria-hidden=“true”lt;/spanlt;strong class=“color-5 fx_t_lt;?php echo $q_id;?”lt;?php echo CHtml::encode($xiaohua-title);?lt;/stronglt;/div lt;div class=“padding-t-5 fx_c_lt;?php echo $q_id;?”lt;?php echo $xiaohua-content;?lt;/div lt;div class=“padding-t-5 text-right”lt;span onclick=“fx(lt;?php echo $q_id;?);” class=“fx cursor_p” data-id=“lt;?php echo $q_id;?”lt;span class=“g-bg glyphicon glyphicon-share-alt margin-r-5” aria-hidden=“true”lt;/span分享lt;/spanlt;/div lt;/div lt;?php endforeach;? lt;/div lt;script var opt={ getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染，如 render(elem) var html=‘‘; var _url=‘lt;?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+=‘lt;div class=“cell m-bg item-h border_h”lt;div class=“border-solid-b padding-b-5 text-center”lt;span class=“g-bg glyphicon glyphicon-sunglasses margin-r-5” aria-hidden=“true”lt;/spanlt;strong class=“color-5 fx_t_’+q_id+’”‘+data[i].title+’lt;/stronglt;/divlt;div class=“padding-t-5 fx_c_’+q_id+’”‘+data[i].content+’lt;/div’ +’lt;div class=“padding-t-5 text-right”lt;span onclick=“fx(‘+q_id+’);” class=“fx cursor_p” data-id=“‘+q_id+’”lt;span class=“g-bg glyphicon glyphicon-share-alt margin-r-5” aria-hidden=“true”lt;/span分享lt;/spanlt;/divlt;/div’; } }}); return $(html); }, column_width:376, column_space:10, auto_imgHeight:true, insert_type:1 } $(‘#waterfall’).waterfall(opt)