仿淘宝/蘑菇街形式，瀑布流效果 -- 固定列数
<!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); }); } });})();
