js仿淘宝/蘑菇街形式，瀑布流效果
2012-11-02 16:29:47 来源：WEB开发网 <!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 >
<link type="text/css" rel="stylesheet" href="./7.css" />
<script type="text/javascript" src="http://www.haodou.com/public/js/jquery-1.5.1.min.js" ></script>
<script type="text/javascript" src="./7.js"></ script>
</head>
<body>
<div id= "waterfall_container1" class="left">
<div class="img_container1" ></div>
<div class="img_container1" ></div>
<div class="img_container1" ></div>
<div style="clear :both;"></div >
</div>
<div id= "waterfall_container2" class="right">
<div class="img_container" ></div>
<div class="img_container" ></div>
<div class="img_container" ></div>
<div style="clear :both;"></div >
</div>
<div style="clear :both;"></div >
<script type="text/javascript" >
var tpl = '<div>'+
'<div><img src="{img}" width="195" /></div>'+
'<div>{about}</div>'+
'<div>{title}</div>'+
'<div>{start}</div>'+
'</div>';
/**
* waterfall: 瀑布流效果的入口函数
* $("#waterfall_container1")： 外层容器的对象 （必填）
* url: ajax请求的url地址，可以带参数 （必填）
* tpl: 前端HTML模板，其中{img},{about},{title},{start} 必须与 ajax返回的数组下标一致
* img，about，title，start命名可以随意 （必填）
* selector: 外层容器（waterfall_container1）中的每列容器(img_container1)的class名称,
* 格式：‘.img_container1’,注意别忘记‘.’,默认值：‘.img_container’ (非必填)
* max_page: ajax请求最大的页数，默认为：5 ，超过该值不再发送ajax请求(非必填)
*
* waterfall_1 : 返回函数(setActive), 参数val：设置是否开启根据窗口下拉比例多次获取函数，false：不开启，true：开启，默认：true
* 作用：用于多标签切换，只有当前选中tal标签才能继续通过ajax获取数据，其它一律不能获取数据，tal标签切换时手动触发该函数
*/
var waterfall_1 = waterfall($("#waterfall_container1"), {url:'./7.php?a=1&b=2' , tpl:tpl, selector:'.img_container1', max_page:10});
中查找“js仿淘宝/蘑菇街形式，瀑布流效果”更多相关内容
中查找“js仿淘宝/蘑菇街形式，瀑布流效果”更多相关内容更多精彩
赞助商链接
