仿淘宝/蘑菇街形式，瀑布流效果 -- 固定列数
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 =
'
'
+
'
'
+
'
{about}
'
+
'
{title}
'
+
'
{start}
'
+
'
'
;
/**
* 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
*
*/
;(
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
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.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);
});
}
});
})();
123宝贝网(www.123baby.net)