1.test.html

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、港北網(wǎng)站維護(hù)、網(wǎng)站推廣。

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>好看的瀑布

<

script type="text/javascript" language="javascript" src="js/jquery-1.8.0.js">

<

script type="text/javascript" language="javascript" src="js/jquery-1.8.0.min.js">

<

link type="text/css" rel="stylesheet" href="css/waterfall.css" />

<

script type="text/javascript" language="javascript" src="js/waterfall.js">

head>

<

body>

"stage">

 

2.waterfall.js

$(document).ready(function(){

loadMore();

});

 

function

loadMore()

{

$.ajax({

url : 'test.php',

dataType : 'json',

success: function(json){

if(typeofjson =='object'){

varoProduct, $row, iHeight, iTempHeight;

for(vari=0, l=json.length; i

oProduct= json[i];

iHeight=-1;

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

iTempHeight = Number($(this).height());

if(iTempHeight=-1 ||iHeight >iTempHeight){

iHeight=iTempHeight;

$row=$(this);

}

});

$item=$('

').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

lidiv{ font-size:12px; padding:10px; color:#999999; text-align:left; }　

4.test.php

$data = array();

$data[] = array('p_w_picpath'=>'p_w_picpaths/1.jpg','title'=>'111111111');

$data[] = array('p_w_picpath'=>'p_w_picpaths/2.jpg','title'=>'222222222');

$data[] = array('p_w_picpath'=>'p_w_picpaths/3.jpg','title'=>'333333333');

$data[] = array('p_w_picpath'=>'p_w_picpaths/4.jpg','title'=>'444444444');

$data[] = array('p_w_picpath'=>'p_w_picpaths/5.jpg','title'=>'555555555');

$data[] = array('p_w_picpath'=>'p_w_picpaths/6(2).jpg','title'=>'666666666');

$data[] = array('p_w_picpath'=>'p_w_picpaths/7(2).jpg','title'=>'777777777');

$data[] = array('p_w_picpath'=>'p_w_picpaths/8.jpg','title'=>'888888888');

$data[] = array('p_w_picpath'=>'p_w_picpaths/9(1).jpg','title'=>'999999999');

$data[] = array('p_w_picpath'=>'p_w_picpaths/10(2).jpg','title'=>'10101010');

$data[] = array('p_w_picpath'=>'p_w_picpaths/11(2).jpg','title'=>'111111111');

$data[] = array('p_w_picpath'=>'p_w_picpaths/12.jpg','title'=>'12121212');

$data[] = array('p_w_picpath'=>'p_w_picpaths/13.jpg','title'=>'13131313');

$data[] = array('p_w_picpath'=>'p_w_picpaths/14.jpg','title'=>'14141414');

$data[] = array('p_w_picpath'=>'p_w_picpaths/15.jpg','title'=>'15151515');

$data[] = array('p_w_picpath'=>'p_w_picpaths/16(2).jpg','title'=>'16161616');

$data[] = array('p_w_picpath'=>'p_w_picpaths/17(2).jpg','title'=>'17171717');

$data[] = array('p_w_picpath'=>'p_w_picpaths/18.jpg','title'=>'18181818');

$data[] = array('p_w_picpath'=>'p_w_picpaths/19(1).jpg','title'=>'19191919');

$data[] = array('p_w_picpath'=>'p_w_picpaths/20.jpg','title'=>'20202020');

$keys =array_rand($data,10);

$json=array();

foreach($keys as$key){

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

}

echojson_encode($json);

?>

文章名稱：php,jquery做成瀑布效果
鏈接地址：http://weahome.cn/article/pohjsi.html