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

以前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 前台代码：

<ul class="tips" id="wf-main">
                    <volist name="image_list" id='v'>
                        <li class="wf-cld"><img src="{$v.content|ltrim = ###,'.'}"  width="200" height="auto" alt="{$v.title}" /></li>
                        <li class="wf-cld"><img src="{$v.summary|ltrim = ###,'.'}" width="200" height ="auto" alt="{$v.title}" /></li>
                    </volist>
                    </ul>

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 =  $("<li>").addClass("wf-cld").appendTo("#wf-main");
                            $("<img>").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 < num_col){
          col_arr[index] = $(value).height();
      }else{
          var minH = Math.min.apply( null, col_arr );//数组pinHArr中的最小值minH
          var min_index =  $.inArray(minH,col_arr); //获得最小索引值
          //数组中最小元素的高 +  新块的高 + 15 空格距离
          col_arr[min_index] += $child_main.eq(index).height() + 15;

          $(value).css({  //设置元素显示位置
              position:"absolute",
              top:minH + 15 ,
              left : $child_main.eq(min_index).position().left
          });
          var maxH = Math.max.apply(null,col_arr);
          $par_main.height(maxH); // 更改父元素高度
      }
   });
}
//是否进行夹杂滚动条 当最后一张图片顶部 到 最后一张图片自身高度的一半作为分界线
function checkscrollside(){
    var  $child_main =  $("#wf-main>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 <scroll_top + docu_width)?true:false;
}

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/

代码进行时，敬请期待！