<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/style2.css"/>
<link rel="stylesheet" href="css/animation.css"/>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="css/pbl.css"/>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/texiao.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<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(elems,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.$c
qq彩贝商城
需积分: 50 117 浏览量
2018-01-03
20:04:03
上传
评论 3
收藏 2.1MB ZIP 举报
qq彩贝商城 （171个子文件） 
style.css 8KB style2.css 6KB animation.css 4KB pbl.css 1KB zzsc.css 604B
index.html 50KB
focus4.jpg 106KB focus2.jpg 66KB focus1.jpg 63KB focus3.jpg 42KB showqrcode.jpg 28KB m1.jpg 24KB 17.jpg 23KB 17.jpg 23KB 33.jpg 19KB 33.jpg 19KB 59.jpg 19KB 59.jpg 19KB 42.jpg 18KB 42.jpg 18KB 57.jpg 17KB 57.jpg 17KB 23.jpg 17KB 23.jpg 17KB 7.jpg 16KB 7.jpg 16KB 1.jpg 16KB 1.jpg 16KB 49.jpg 16KB 49.jpg 16KB 55.jpg 15KB 55.jpg 15KB 0.jpg 15KB 61.jpg 15KB 61.jpg 15KB 27.jpg 15KB 27.jpg 15KB 28.jpg 14KB 28.jpg 14KB 66.jpg 14KB 66.jpg 14KB 58.jpg 14KB 58.jpg 14KB m3.jpg 14KB 32.jpg 14KB 32.jpg 14KB 65.jpg 14KB 65.jpg 14KB 54.jpg 13KB 54.jpg 13KB 68.jpg 13KB 68.jpg 13KB m4.jpg 13KB 56.jpg 13KB 56.jpg 13KB 44.jpg 13KB 44.jpg 13KB 29.jpg 13KB 29.jpg 13KB m2.jpg 13KB 13.jpg 13KB 13.jpg 13KB 64.jpg 13KB 64.jpg 13KB 48.jpg 13KB 48.jpg 13KB 10.jpg 12KB 10.jpg 12KB 20.jpg 12KB 20.jpg 12KB 19.jpg 12KB 19.jpg 12KB 31.jpg 12KB 31.jpg 12KB 40.jpg 12KB 40.jpg 12KB 21.jpg 12KB 21.jpg 12KB 35.jpg 12KB 35.jpg 12KB 15.jpg 12KB 15.jpg 12KB 11.jpg 12KB 11.jpg 12KB 12.jpg 11KB 12.jpg 11KB 4.jpg 11KB 4.jpg 11KB 22.jpg 11KB 22.jpg 11KB 50.jpg 11KB 50.jpg 11KB 34.jpg 11KB 34.jpg 11KB 37.jpg 11KB 37.jpg 11KB 63.jpg 11KB 63.jpg 11KB 26.jpg 11KB 26.jpg 11KB共 171 条
- 1
- 2
资源评论
