<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style type="text/css">
body{position:relative;margin:0;padding:55px 0 0 0;}
#demo_menu{position:absolute;top:0;left:0;width:100%;height:50px;line-height:50px;background:url(/statics/images/my/menu_bg.png) repeat-x;z-index:800;font-size:14px;text-align:center;color:#999;line-height:180%;border-bottom:1px solid #8A961C;}
#demo_menu .top_menu{width:1080px;margin:0 auto;color:#000;font-size:12px;overflow:hidden;z-index:1000;}
#demo_menu .top_menu strong{width:195px;display:block;height:50px;float:left;background:url(/statics/images/my/logo.png) no-repeat 0 8px;}
#demo_menu .top_left{float:left;width:550px;height:50px;line-height:50px;z-index:9999;overflow:hidden;}
#demo_menu .top_left ul{width:550px;float:right;overflow:hidden;list-style: none;margin:0;padding:0;}
#demo_menu .top_left li{float:left;margin:0 15px 0 0;padding:0;text-align:center;}
#demo_menu .top_left li a,#demo_menu .top_left li a:visited{font-size:14px;font-weight:bold;color:#333;text-decoration:none;width:60px;display:block;height:50px;line-height:50px;}
#demo_menu .top_left li a:hover,#demo_menu .top_left li a:hover span{cursor:pointer;color:#fff;text-decoration:none;}
#demo_menu .top_left a,#demo_menu .top_left a:visited{font-size:12px;white-space:nowrap;color:#fff;font-family:"宋体", "Times New Roman", Times, serif;line-height:140%;}
#demo_menu .top_left a:hover{color:#000;font-family:"宋体", "Times New Roman", Times, serif;}
#demo_menu .top_right{float:right;width:320px;padding:8px 0 0 0;z-index:1000;}
#bdshare{margin:-5px 0 0 0;}
</style><title>漂亮的jQuery瀑布流代码 支持无限下拉渐变显示</title>
<link href="css/css.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script>
;(function($){
var
//参数
setting={
column_width:240,//列宽
column_className:'waterfall_column',//列的类名
column_space:10,//列间距
cell_selector:'.cell',//要排列的砖块的选择器，context为整个外部容器
img_selector:'img',//要加载的图片的选择器
auto_imgHeight:true,//是否需要自动计算图片的高度
fadein:true,//是否渐显载入
fadein_speed:600,//渐显速率，单位毫秒
insert_type:1, //单元格插入方式，1为插入最短那列，2为按序轮流插入
getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
},
//
waterfall=$.waterfall={},//对外信息对象
$waterfall=null;//容器
waterfall.load_index=0, //加载次数
$.fn.extend({
waterfall:function(opt){
opt=opt||{};
setting=$.extend(setting,opt);
$waterfall=waterfall.$waterfall=$(this);
waterfall.$columns=creatColumn();
render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显
waterfall._scrollTimer2=null;
$(window).bind('scroll',function(){
clearTimeout(waterfall._scrollTimer2);
waterfall._scrollTimer2=setTimeout(onScroll,300);
});
waterfall._scrollTimer3=null;
$(window).bind('resize',function(){
clearTimeout(waterfall._scrollTimer3);
waterfall._scrollTimer3=setTimeout(onResize,300);
});
}
});
function creatColumn(){//创建列
waterfall.column_num=calculateColumns();//列数
//循环创建列
var html='';
for(var i=0;i<waterfall.column_num;i++){
html+='<div class="'+setting.column_className+'" style="width:'+setting.column_width+'px; display:inline-block; *display:inline;zoom:1; margin-left:'+setting.column_space/2+'px;margin-right:'+setting.column_space/2+'px; vertical-align:top; overflow:hidden"></div>';
}
$waterfall.prepend(html);//插入列
return $('.'+setting.column_className,$waterfall);//列集合
}
function calculateColumns(){//计算需要的列数
var num=Math.floor(($waterfall.innerWidth())/(setting.column_width+setting.column_space));
if(num<1){ num=1; } //保证至少有一列
return num;
}
function render(elements,fadein){//渲染元素
if(!$(elements).length) return;//没有元素
var $columns = waterfall.$columns;
$(elements).each(function(i){
if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度，或者是按顺序插入，则不必等图片加载完就能计算列的高度了
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
return true;//continue
}
if($(this)[0].nodeName.toLowerCase()=='img'||$(this).find(setting.img_selector).length>0){//本身是图片或含有图片
var image=new Image;
var src=$(this)[0].nodeName.toLowerCase()=='img'?$(this).attr('src'):$(this).find(setting.img_selector).attr('src');
image.onload=function(){//图片加载后才能自动计算出尺寸
image.onreadystatechange=null;
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
image=null;
}
image.onreadystatechange=function(){//处理IE等浏览器的缓存问题：图片缓存后不会再触发onload事件
if(image.readyState == "complete"){
image.onload=null;
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
image=null;
}
}
image.src=src;
}else{//不用考虑图片加载
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
}
});
}
function public_render(elems){//ajax得到元素的渲染接口
render(elms,true);
}
function insert($element,fadein){//把元素插入最短列
if(fadein){//渐显
$element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);
}else{//不渐显
$element.appendTo(waterfall.$columns.eq(calculateLowest()));
}
}
function insert2($element,i,fadein){//按序轮流插入元素
if(fadein){//渐显
$element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);
}else{//不渐显
$element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));
}
}
function calculateLowest(){//计算最短的那列的索引
var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;
waterfall.$columns.each(function(i){
if($(this).outerHeight()<min){
min=$(this).outerHeight();
min_key=i;
}
});
return min_key;
}
function getElements(){//获取资源
$.waterfall.load_index++;
return setting.getResource($.waterfall.load_index,public_render);
}
waterfall._scrollTimer=null;//延迟滚动加载计时器
function onScroll(){//滚动加载
clearTimeout(waterfall._scrollTimer);
waterfall._scrollTimer=setTimeout(function(){
var $lowest_column=waterfall.$columns.eq(calculateLowest());//最短列
var bottom=$lowest_column.offset().top+$lowest_column.outerHeight();//最短列底部距离浏览器窗口顶部的距离
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离
var windowHeight=document.documentElement.clientHeig
jquery瀑布流特效.zip （25个子文件） 
jquery瀑布流特效 css 
css.css 545B .DS_Store 6KB images 
02.jpg 23KB 01.jpg 24KB 03.jpg 29KB 12.jpg 20KB 04.jpg 28KB 07.jpg 15KB 10.jpg 19KB 00.jpg 27KB 09.jpg 11KB 18.jpg 59KB 19.jpg 53KB 05.jpg 43KB 11.jpg 14KB 14.jpg 17KB 15.jpg 29KB 17.jpg 22KB 16.jpg 20KB 13.jpg 25KB 06.jpg 24KB 08.jpg 17KB js jquery.min.js 91KB
index.html 13KB .DS_Store 6KB
- 1
- 2
- 3
前往页