威斯尼斯人官网PHP结合Jquery和ajax实现瀑布流特效_php实例_脚本之家

getMyVal;$xiaohuaList=Xiaohua::model()->getXiaohao; //打开页面默认显示的数据?>  id;?>   content;?> 分享  var opt={ getResource:function{//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染,如 render var html=''; var _url='<?php echo $this->createUrl;?>'; $.ajax({ type: "get", url: _url, dataType : "json", async:false, success: function{ for{ var q_id=data[i].id; html+='<div ><div ><span aria-hidden="true"></span><strong >'+data[i].title+'</strong></div><div >'+data[i].content+'</div>' +'<div ><span onclick="fx;" data-><span aria-hidden="true"></span>分享</span></div></div>'; } }}); return $; }, column_width:376, column_space:10, auto_imgHeight:true, insert_type:1}$.waterfall;

public function actionListXiaohua() { $xiaohuaList=Xiaohua::model;//获取笑话信息 echo CJSON::encode;}

{ var //参数 setting={ column_width:240,//列宽 column_className:'waterfall_column',//列的类名 column_space:2,//列间距 cell_selector:'.cell',//要排列的砖块的选择器,context为整个外部容器 img_selector:'img',//要加载的图片的选择器 auto_imgHeight:true,//是否需要自动计算图片的高度 fadein:true,//是否渐显载入 fadein_speed:600,//渐显速率,单位毫秒 insert_type:1, //单元格插入方式,1为插入最短那列,2为按序轮流插入 getResource:function{ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数 }, // waterfall=$.waterfall={},//对外信息对象 $waterfall=null;//容器 waterfall.load_index=0, //加载次数 $.fn.extend({ waterfall:function{ opt=opt||{}; setting=$.extend; $waterfall=waterfall.$waterfall=$; waterfall.$columns=creatColumn.find(setting.cell_selector).detach; //重排已存在元素时强制不渐显 waterfall._scrollTimer2=null; $.bind{ clearTimeout(waterfall._scrollTimer2); waterfall._scrollTimer2=setTimeout; waterfall._scrollTimer3=null; $.bind{ clearTimeout(waterfall._scrollTimer3); waterfall._scrollTimer3=setTimeout; } }); function creatColumn(){//创建列 waterfall.column_num=calculateColumns();//列数 //循环创建列 var html=''; for(var i=0;i'; } $waterfall.prepend;//插入列 return $('.'+setting.column_className,$waterfall);//列集合 } function calculateColumns(){//计算需要的列数 var num=Math.floor(($waterfall.innerWidth/(setting.column_width+setting.column_space)); if{ num=1; } //保证至少有一列 return num; } function render{//渲染元素 if return;//没有元素 var $columns = waterfall.$columns; $.each{ if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度,或者是按顺序插入,则不必等图片加载完就能计算列的高度了 if(setting.insert_type==1){ insert,setting.fadein&&fadein);//插入元素 }else if(setting.insert_type==2){ insert2,i,setting.fadein&&fadein);//插入元素 } return true;//continue } if[0].nodeName.toLowerCase.find.length>0){//本身是图片或含有图片 var image=new Image; var src=$[0].nodeName.toLowerCase.attr.find.attr; image.onload=function(){//图片加载后才能自动计算出尺寸 image.onreadystatechange=null; if(setting.insert_type==1){ insert,setting.fadein&&fadein);//插入元素 }else if(setting.insert_type==2){ insert2,i,setting.fadein&&fadein);//插入元素 } image=null; } image.onreadystatechange=function(){//处理IE等浏览器的缓存问题:图片缓存后不会再触发onload事件 if(image.readyState == "complete"){ image.onload=null; if(setting.insert_type==1){ insert,setting.fadein&&fadein);//插入元素 }else if(setting.insert_type==2){ insert2,i,setting.fadein&&fadein);//插入元素 } image=null; } } image.src=src; }else{//不用考虑图片加载 if(setting.insert_type==1){ insert,setting.fadein&&fadein);//插入元素 }else if(setting.insert_type==2){ insert2,i,setting.fadein&&fadein);//插入元素 } } }); } function public_render{//ajax得到元素的渲染接口 render; } function insert{//把元素插入最短列 if{//渐显 $element.css.appendTo(waterfall.$columns.eq.fadeTo(setting.fadein_speed,1); }else{//不渐显 $element.appendTo(waterfall.$columns.eq; } } function insert2{//按序轮流插入元素 if{//渐显 $element.css.appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1); }else{//不渐显 $element.appendTo(waterfall.$columns.eq(i%waterfall.column_num)); } } function calculateLowest(){//计算最短的那列的索引 var min=waterfall.$columns.eq,min_key=0; waterfall.$columns.each{ if=bottom-windowHeight){ render; } },100); } function onResize(){//窗口缩放时重新排列 if==waterfall.column_num) return; //列数未改变,不需要重排 var $cells=waterfall.$waterfall.find(setting.cell_selector); waterfall.$columns.remove(); waterfall.$columns=creatColumn(); render; //重排已有元素时强制不渐显 }});

定宽Jquery+AJAX+JSON瀑布流布局body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; }/*瀑布流布局样式*/#lxf-box { position: relative; width: 1000px; margin:0 auto;}#lxf-box li { background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; float: left;}h3 { padding-top: 8px; }img { width: 200px; height: auto; display: block; border: 0 }/*css3动画 注由于是css3制作的所以兼容性不保证 要想兼容性好 请自己做成gif动画加载图*//*li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }*/#loading { display:none; line-height: 30px; background: #000; color:#fff; text-align: center; height: 30px; width: 100%; position:fixed; bottom:0; opacity:0.8;}预览无效果请刷新
  • 威斯尼斯人官网 1

    ### 图片标题

  • 威斯尼斯人官网 2

    ### 图片标题

  • 威斯尼斯人官网 3

    ### 图片标题

  • 威斯尼斯人官网 4

    ### 图片标题

  • 威斯尼斯人官网 5

    ### 图片标题

  • 威斯尼斯人官网 6

    ### 图片标题

  • 威斯尼斯人官网 7

    ### 图片标题

  • 威斯尼斯人官网 8

    ### 图片标题

  • 威斯尼斯人官网 9

    ### 图片标题

  • 威斯尼斯人官网 10

    ### 图片标题

  • img src=”/uploads/allimg/120813/1-120Q3145U0938.jpg”>

    ### 图片标题

  • 威斯尼斯人官网 11

    ### 图片标题

正在加载……

如果运行效果无非显示请点击
【返回首页】【刷新本页)】【返回顶部】【关闭本页)】

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章