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.p_w_picpath+'" 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('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.jpg','title'=>'666666666');
$data[] = array('p_w_picpath'=>'p_w_picpaths/7.jpg','title'=>'777777777');
$data[] = array('p_w_picpath'=>'p_w_picpaths/8.jpg','title'=>'888888888');
$data[] = array('p_w_picpath'=>'p_w_picpaths/9.jpg','title'=>'999999999');
$data[] = array('p_w_picpath'=>'p_w_picpaths/10.jpg','title'=>'10101010');
$data[] = array('p_w_picpath'=>'p_w_picpaths/11.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.jpg','title'=>'16161616');
$data[] = array('p_w_picpath'=>'p_w_picpaths/17.jpg','title'=>'17171717');
$data[] = array('p_w_picpath'=>'p_w_picpaths/18.jpg','title'=>'18181818');
$data[] = array('p_w_picpath'=>'p_w_picpaths/19.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];
}
echo json_encode($json);
?>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
