Php,jquery Waterfall Effect

1.test.html

<!

DOCTYPE HTML Public "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd">

<

HTML>

<

Head>

<

Meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">

<

title>Nice waterfall.</title>

<

Script type= "Text/javascript" language= "JavaScript" src= "Js/jquery-1.8.0.js"></Script>

<

Script type= "Text/javascript" language= "JavaScript" src= "Js/jquery-1.8.0.min.js"></Script>

<

Link type= "Text/css" rel= "stylesheet" href= "Css/waterfall.css" />

<

Script type= "Text/javascript" language= "JavaScript" src= "Js/waterfall.js"></Script>

</

Head>

<

Body>

< ul id="Stage">

< Li ></ Li >

< Li ></ Li >

< Li ></ Li >

< Li ></ Li >

</ ul >

</body>

</html>

2.waterfall.js

$ (document). Ready (function() {

Loadmore ();

});

　

function

Loadmore ()

{

$.ajax ({

URL: ' test.php ',

DataType: ' json ',

Success: function(JSON) {

if (typeof json = =' object ') {

var oproduct, $row, iheight, itempheight;

for (var i=0, l=json.length; i<l; i++) {

Oproduct= Json[i];

Iheight=-1;

$ (' #stage li '). Each (function() {

Itempheight = number (this). Height ());

if (Itempheight=-1 | | Iheight >itempheight) {

Iheight=itempheight;

$row =$ (this);

}

});

$item =$ (' <div>+oproduct.image+' "border=" 1 "><br> '+oproduct.title+ ' </div> '). Hide ();

$row. Append ($item);

$item. FadeIn ();

}

}

}

});

}

3.waterfall.css

Body

{text-align: Center;}

/*download by http://www.codefans.net*/

#stage

{margin: 0 Auto;padding: 0;width: 880px; }

#stage

Li{margin: 0;padding: 0;List-style: None;float: Left;width: 220px;}

#stage

Li Div{font-size: 12px;padding: 10px;Color: #999999;text-align: Left; }

　

4.test.php

<?php

$data = array();

$data [] = array(' image '=' images/1.jpg',' title '= '111111111 ') ;

$data [] = array(' image '=' images/2.jpg',' title '= = ' 222222222 ');

$data [] = array(' image '=' images/3.jpg',' title '= '333333333 ') ;

$data [] = array(' image '=' images/4.jpg',' title '= '444444444 ') );

$data [] = array(' image '=' images/5.jpg',' title '= = ' 555555555 ');

$data [] = array(' image '=' images/6.jpg',' title '= '666666666 ') ;

$data [] = array(' image '=' images/7.jpg',' title '= '777777777 ') );

$data [] = array(' image '=' images/8.jpg',' title '= = ' 888888888 ');

$data [] = array(' image '=' images/9.jpg',' title '= '999999999 ') ;

$data [] = array(' image '=' images/10.jpg',' title '= '10101010 ') );

$data [] = array(' image '=' images/11.jpg',' title '= = ' 111111111 ');

$data [] = array(' image '=' images/12.jpg',' title '= '12121212 ') ;

$data [] = array(' image '=' images/13.jpg',' title '= '13131313 ') );

$data [] = array(' image '=' images/14.jpg',' title '= = ' 14141414 ');

$data [] = array(' image '=' images/15.jpg',' title '= '15151515 ') ;

$data [] = array(' image '=' images/16.jpg',' title '= '16161616 ') );

$data [] = array(' image '=' images/17.jpg',' title '= = ' 17171717 ');

$data [] = array(' image '=' images/18.jpg',' title '= '18181818 ') ;

$data [] = array(' image '=' images/19.jpg',' title '= '19191919 ') );

$data [] = array(' image '=' images/20.jpg',' title '= = ' 20202020 ');

$keys =array_rand ($data, 10);

$json =array();

foreach ($keys as $key) {

$json []= $data [$key];

}

echo Json_encode ($json);

?>

Php,jquery Waterfall Effect