jquery implements waterfall flow and interacts with PHP for data

Before JS implemented a waterfall flow, jquery also to achieve a

Main ideas:

1 first show about 20 pictures, so that the interface appears scroll bar

2 Settings display the picture the parent ID is set to relative positioning and the image is positioned as float

3 make the newly displayed picture appear as a collapsed waterfall stream

4 when scrolling the scroll bar, decide whether to load the picture

5 to reorder the newly loaded pictures with the waterfall flow

Focus:

1 deciding what time to load a new picture

2 Implementing Waterfall streaming sequencing

How to determine which part of the image to load that, in the background limit the location is OK

OK, on the code:

1 show some pictures first

                Implement waterfall flow Display picture public                function photo () {                    $id = M ("Cate")->field ("id")->where ("name = ' album Display '")->select () ;                    $this->image_list = M ("Blog")->field ("Content, summary")->limit ("Time desc")->order ("The CID = {$id [0][' id ']} ")->select ();                    $this->length=10;//just started showing 10 pictures                    $this->cur_position = ' album Show ';                    $this->id           = $id [0][' id '];                    $this->display ();                }

2 Front Code:

<ul class= "Tips" id= "Wf-main" >                    <volist name= "image_list" id= ' V ' >                        <li class= "WF-CLD" >< IMG src= "{$v. Content|ltrim = # # #, '. '}"  Width= "height=" "Auto" alt= "{$v. Title}"/></li>                                 <li class= "WF-CLD" ></li>                    </volist>                    </ul>

3 Reception Style:

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

4 Key JS Code:

$ (function () {waterfall (); Load Picture $ (window). Scroll (function () {if (Checkscrollside ()) {var offset = $ ("Input[name=offset]"). V             Al ();             var length = $ ("input[name=length]"). Val ();             var Justice = $ ("input[name=justic]"). Val ();             if (Justice = = = Offset) {return false;             }else{$ ("input[name=justic]"). Val (offset);                        } $.post (//Add new elements each time to sort "/index/show/more_photo" for the waterfall, { Offset:offset, Length:length},function (data) {if (data) {$ (data). each (function (index,value) {$li = $ ("<li>"). Addclas                            S ("WF-CLD"). AppendTo ("#wf-main"); $ ("li"). length);                            Make sure that the scrollbar height remains constant var scroll_top = $ (window). scrolltop ();                             Waterfall ();                        $ (window). scrolltop (Scroll_top);                     }}, "JSON");    }    });   });//Let the picture collapse arrange function waterfall () {var $par _main = $ ("#wf-main");//parent element var $child _main = $ ("#wf-main>li");//child element var par_width = $par _main.width (); Gets the width of the parent element var child_width = $child _main.eq (0). width (); Get the child element width var num_col = Math.floor (par_width/child_width); A row shows how many columns var col_arr = [];   The height of all the elements in a column adds up to a num_col value of 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);//The minimum value in the array Pinharr minH var min_index = $.inarray (Minh,col_arr);                    Gets the minimum index value///height of the smallest element in the array + new block high + 15 space distance Col_arr[min_index] + = $child _main.eq (index). Height () + 15;  $ (value). CSS ({//Set element display location position: "Absolute", Top:minh +, left          : $child _main.eq (Min_index). Position (). left});          var maxh = Math.max.apply (Null,col_arr); $par _main.height (MAXH); Change parent element Height}});    Whether to make the inclusion of the scrollbar when the last picture top to the last picture of its own height of half as the dividing line function checkscrollside () {var $child _main = $ ("#wf-main>li");    var trigger_heigth = $child _main.last (). Get (0). OffsetTop + $child _main.height ()/2;    scroll bar height var scroll_top = $ (window). scrolltop ();    Gets the page width var docu_width = $ (document). width (); Return (trigger_heigth <scroll_top + docu_width)? True:false;}

5 Reload the background code for the new picture each time:

    The public                function More_photo () {                    $offset = $_post[' offset '                    ) is displayed at a time according to Ajax. $length = $_post[' length '];                    $id = M ("Cate")->field ("id")->where ("name = ' album Display '")->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));                }

Okay, here's the end:

By the way, show shows:

The actual address is on a personal blog:

http://buyingfeiblog.sinaapp.com/

Please wait while the code is in progress!

jquery implements waterfall flow and interacts with PHP for data