php,jquery做成瀑布效果

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 >好看的瀑布 </ 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><img src="'+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);

?>