仿淘宝/蘑菇街方式，瀑布流效果 - 固定列数
仿淘宝/蘑菇街形式，瀑布流效果 -- 固定列数
<!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});
//waterfall_1.setActive(false);
var waterfall_2
= waterfall($("#waterfall_container2"), {url:'./7__.php',
tpl:tpl});
//waterfall_2.setActive(false);
</script>
</body>
</html>
/**
* 瀑布流效果JS
*
* @author lixiaogang <858864436@qq.com>
*/
;(function(){
//保存每个选项卡所对应的数据[instance的json结构]
var instances
= [], $win = $(window), scroll_top = 0;
/**
* 瀑布流效果入口函数
* @param object el 瀑布流外层的容器的节点对象
* @param json options
json对象：
* url:ajax请求路径(必填),
* tpl:html模板(必填),
* selector:ajax数据填充节点的class名称，默认为：.img_container
* max_page:ajax获取最大的页数，默认为：5
*
* @return object setActive：设置是否开启根据窗口下拉比例多次获取函数，false：不开启，true：开启
*/
waterfall = function(el,
options) {
if(!options.url
|| !options.tpl) return;
var instance
= {element: el, active: true,
loading: true, page:
0, max_page:5};
if(options.max_page)
instance = $.extend(instance, {max_page:options.max_page});
instance.options = $.extend({selector: '.img_container'},
options);
instance.children = $(el).find(instance.options.selector);
instance.cols = instance.children.length;
var index
= instances.length;
instances[index] = instance;
load(instance);
return {
setActive: function(val)
{
instances[index].active = !!val;
}
};
};
//ajax 动态获取数据
function load(instance)
{
instance.page++;
if(instance.page
> parseInt(instance.max_page)) return;
$.getJSON(instance.options.url, {page:instance.page}, function(data)
{
var data_len
= data.length, temp = []; //临时保存html
for(var i=0;
i<data_len; i++){
var item
= data.shift(), index = i % instance.cols;
if('undefined' == typeof temp[index])
temp[index] = '';
temp[index] += instance.options.tpl.replace(/\{\w+\}/g , function(m)
{return item[m.substring(1,m.length-1)];});
}
if(0
< temp.length){
for(var i=0;
i<instance.cols; i++){
instance.children.eq(i).append(temp[i]);
}
}
instance.loading = false;
});
};
/**
* 窗口绑定事件
* 1. 若 active=false 则 不触发ajax的数据获取
* 2. 若 loading=true 则 表示正在进行ajax数据获取，不进行多次数据获取
*/
$win.scroll( function()
{
var temp_scroll_top
= $win.scrollTop();
if (temp_scroll_top
> scroll_top && ($win.height() + $win.scrollTop()) >= $("body" ).height()-100)
{
scroll_top = temp_scroll_top;
$.each(instances, function(i,
instance){
if (!instance.active
|| instance.loading) return;
instance.loading = true;
load(instance);
});
}
});
})();
- 1楼a27250368038分钟前
- 我自己先顶一个。