jquery实现瀑布流并与php实现数据交互-php教程-PHP中文网

jquery实现瀑布流并与php实现数据交互

WBOY

发布： 2016-06-23 13:37:23

原创

1335 人浏览过

以前js 实现过一个瀑布流，jquery 也来实现一个

主要思路：

1 先显示出来大概20张图片，使界面出现滚动条

2 设置显示出来图片父id 设置为relative 定位，图片定位方式为float 定位

3 使刚显示出来的图片作为折叠出现，呈现为瀑布流

4 当滚动滚动条时，判断是否进行加载图片

5 使新加载的图片重新进行瀑布流排序

重点：

1 判断什么时间进行加载新图片

2 实现瀑布流式排序

怎样确定加载哪部分图片那，在后台limit 一下位置就ok啦

好，上代码:

1 先显示出来部分图片

                //实现瀑布流显示图片                public function photo(){                    $id = M("Cate")->field("id")->where("name = '相册展示'")->select();                    $this->image_list = M("Blog")->field("content ,summary")->limit(10)->order("time desc")->where("cid = {$id[0]['id']}")->select();                    $this->length=10;//刚开始显示10张图片                    $this->cur_position = '相册展示';                    $this->id           = $id[0]['id'];                    $this->display();                }

登录后复制

2 前台代码：

登录后复制

3 前台样式：

    <!--content end-->    <style type="text/css">        #wf-main{position: relative;}        #wf-main li{padding: 15px 0 0 15px; float:left;}    </style>

登录后复制

4 重点 js 代码：

$(function(){    waterfall();    //进行加载图片    $(window).scroll(function(){         if(checkscrollside()){             var offset = $("input[name=offset]").val();             var length = $("input[name=length]").val();             var justice = $("input[name=justic]").val();             if(justice === offset){                 return false;             }else{                 $("input[name=justic]").val(offset);             }             $.post( //每次添加新元素进行瀑布流排序                     "/Index/Show/more_photo",                    {                        offset :offset,                        length:length                    },function(data){                        if(data){                            $(data).each(function(index,value){                            $li =  $("

登录后复制

").addClass("wf-cld").appendTo("#wf-main"); $(" jquery实现瀑布流并与php实现数据交互

").attr({"src":value.summary,"title":value.title}).css({"width":"200px","height":"auto"}).appendTo($li); }); $("input[name=offset]").val(parseInt(offset) + 10); console.log($("#wf-main>li").length); //确保滚动条高度保持不变 var scroll_top = $(window).scrollTop(); waterfall(); $(window).scrollTop(scroll_top); } },"json"); } }); });//让图片折叠排列function waterfall(){ var $par_main = $("#wf-main"); //父元素 var $child_main = $("#wf-main>li"); //子元素 var par_width = $par_main.width(); //获得父元素的宽度 var child_width = $child_main.eq(0).width(); //获得子元素宽度 var num_col = Math.floor(par_width / child_width); //一行显示多少列 var col_arr = []; //一列中所有元素相加后的高度做多有num_col 个值 col_arr.length=0; $child_main.each(function(index,value){ if(index li"); var trigger_heigth = $child_main.last().get(0).offsetTop + $child_main.height() / 2; //滚动条高度 var scroll_top = $(window).scrollTop(); //获取页面宽度 var docu_width = $(document).width(); return (trigger_heigth
5 每次都重新加载新图片的后台代码：

    //根据ajax 每次显示出来部分图片                public function more_photo(){                    $offset = $_POST['offset'];                    $length = $_POST['length'];                    $id = M("Cate")->field("id")->where("name = '相册展示'")->select();                    $image_list = M("Blog")->field("content ,summary,title")->limit($offset,$length)->order("time desc")->where("cid = {$id[0]['id']}")->select();                    exit(json_encode($image_list));                }

登录后复制

好啦，到此结束：

顺便秀秀战果了：

实际地址就是在个人博客上面啦：

http://buyingfeiblog.sinaapp.com/

代码进行时，敬请期待！