jqueryはウォーターフォールフローを実装し、phpとのデータ対話を実装します。

JS は以前にウォーターフォール フローを実装しましたが、jquery もそれを実装します

主なアイデア:

1 最初に約 20 枚の画像を表示し、インターフェースにスクロール バーが表示されるようにします

2 表示されたものの親 ID を設定します画像を相対配置に、画像の配置方法はフロート配置です

3 新しく表示された画像を折り目で表示し、滝の流れとして表示します

4 スクロールバーをスクロールするときに、画像を読み込むかどうかを決定します

5新しくロードされた画像がウォーターフォール フローによって再並べ替えられます

重要なポイント:

1 新しい画像をいつロードするかを決定します

2 ウォーターフォール フロー ソートを実装します

画像のどの部分をロードするかを決定するにはどうすればよいですか?背景を選択すれば問題ありません

それでは、コードを示します:

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/

コードは進行中ですので、しばらくお待ちください!