JavaScript基础（十六）jQuery插件扩展、鼠标事件、实战案例

jQuery插件扩展

jQuery为开发插件提供了两个方法
	$.extend()
	$.fn.extend()

$.extend

// 一个参数
// $.extend(obj);
// 为jQuery类添加类方法，可以理解为静态方法
$.extend({
	min: function(a, b){
		return a>b ? b : a;
	},
	max: function(a, b){
		return a>b ? a : b;
	}
});
// alert(jQuery.min(1, 3)); // 1
// alert($.min(1, 3)); // 1

// 两个参数以上：混入
var json1 = {name: 'Bob', age: 15};
var json2 = {name: 'Alice', age: 35, address: '深圳'};
var json3 = {name: 'Tom', tel: 12334536451};
var json = $.extend(json1, json2, json3);
console.log(json, json1);
// {name: "Tom", age: 35, address: "深圳", tel: 12334536451} 
// {name: "Tom", age: 35, address: "深圳", tel: 12334536451}

$.fn.extend

// $.fn.extend() 相当于对jQuery.prototype的扩展
// 为jQuery类添加成员函数，jQuery类的实例可以使用这个成员函数
$.fn.extend({
	Alert: function(){
		$(this).on('click', function(){
			alert('Hello');
		});
		return $(this);
	},
	hello: function(){
		console.log('扩展实例方法。。。');
		return $(this);
	}
});
$('button').Alert().hello();

$.extend():并不会把这个方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现
$.fn.extend():的调用是把方法扩展到对象的prototype上，所以实例化一个jQuery对象时，该对象就具有了这些方法

onmouseover与onmouseout+onmouseenter与onmouseleave

当鼠标指针穿过元素时，会发生mouseenter事件。该事件大多数时候会与mouseleave事件一起使用。
与mouseover事件不同，只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。如果鼠标指针穿过任何子元素，同样会触发mouseover事件。

例如

<style type="text/css">
	*{padding:0px;margin:0px;}
	#box{width:200px;margin:150px auto;}
	#box ul{border:1px solid red;}
	#box ul li{width:200px;background:red;height:50px;list-style:none;margin-top:10px;}
</style>
<div id="box">
	<ul id="ul">
		<li></li>
		<li></li>
	</ul>
</div>

ul.onmouseover = function(){
	console.log(1, 'onmouseover');
};
ul.onmouseout = function(){
	console.log(2, 'onmouseout');
};
ul.onmouseenter = function(){
	console.log(3, 'onmouseenter');
};
ul.onmouseleave = function(){
	console.log(4, 'onmouseleave');
};
// 当鼠标从上到下穿过整个ul时：
// 1 "onmouseover"   ==> 移入ul
// 3 "onmouseenter"  ==> 进入ul
// 2 "onmouseout"    ==> 移出ul，进入li
// 1 "onmouseover"	 ==> 移出ul，进入li
// 2 "onmouseout"	 ==> 移出li，进入ul
// 1 "onmouseover"	 ==> 移出li，进入ul
// 2 "onmouseout"	 ==> 移出ul，进入li
// 1 "onmouseover"	 ==> 移出ul，进入li
// 2 "onmouseout"	 ==> 移出li
// 4 "onmouseleave"	 ==> 离开ul

实战案例

全屏滚动特效

*{padding: 0;margin: 0;}
html,body{height: 100%}
ul li{list-style: none;}
/*body{overflow: hidden;}*/
#bg{width: 100%;height: 100%;}
#bg div{width: 100%;height: 100%;background-position: center;background-attachment: fixed;}
#header{width: 100%;height: 47px;position: fixed;top: 25px;left: 0;}
#header .h-logo{height: 47px;margin-left: 50px;float: left;}
#header .h-nav{height: 47px;line-height: 47px;width: 400px;float: right;margin-right: 20px;position: relative;}
#header .h-nav ul{z-index: 5;position: relative;height: 47px;}
#header .h-nav li{float: left;margin: 0 20px;cursor: pointer;}
#header .h-nav li a{text-decoration: none;color: #c2d5eb;}
#header .h-nav li.bold a{font-weight: bold;color: #fff;}
#nav-wrap{width: 58px;height: 30px;border: 1px solid #fff;border-radius: 12px;position: absolute;top:8px;left: 4px;z-index: 3;}
#slide{width: 100px;height: 270px;position: fixed;top: 150px;left: 50px;background: url(img/nav.png) no-repeat;}
#slide ul{padding-top: 6px}
#slide li{font-size: 12px;font-family: 'Microsoft yahei';padding-left: 50px;color: #fff;height: 21px;margin-bottom: 56px;cursor: pointer;}
#slide li.on{background: url(img/nav_cho.png) no-repeat;color: #05c677}
/*滚动条兼容*/
::-webkit-scrollbar{width:10px;height:6px;background:#ccc;}
::-webkit-scrollbar-button{background-color:#e5e5e5;}
::-webkit-scrollbar-track{background:#999;}
::-webkit-scrollbar-track-piece{background:#ccc}
::-webkit-scrollbar-thumb{background:#666;}
::-webkit-scrollbar-corner{background:#82AFFF;}
::-webkit-scrollbar-resizer{background:#FF0BEE;}
scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}

<div id="header">
<div class="h-logo">
	<img src="img/logo.png">
</div>
<div class="h-nav">
	<ul>
		<li class="bold"><a href="javascript:void(0);">首页</a></li>
		<li><a href="javascript:void(0);">常见问题</a></li>
		<li><a href="javascript:void(0);">论坛</a></li>
		<li><a href="javascript:void(0);">360首页>></a></li>
	</ul>
	<div id="nav-wrap"></div>
</div>
<div id="slide">
	<ul>
		<li class="on">安全换机</li>
		<li>无网对传</li>
		<li>隐私粉碎</li>
		<li>一键转移</li>
	</ul>
</div>
</div>
<div id="bg">
<div style="background-image: url(img/1.jpg);"></div>
<div style="background-image: url(img/2.jpg);"></div>
<div style="background-image: url(img/3.jpg);"></div>
<div style="background-image: url(img/4.jpg);"></div>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>

// jquery.mousewheel.js
(function($) {

var types = ['DOMMouseScroll', 'mousewheel'];

if ($.event.fixHooks) {
    for ( var i=types.length; i; ) {
        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
    }
}

$.event.special.mousewheel = {
    setup: function() {
        if ( this.addEventListener ) {
            for ( var i=types.length; i; ) {
                this.addEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = handler;
        }
    },
    
    teardown: function() {
        if ( this.removeEventListener ) {
            for ( var i=types.length; i; ) {
                this.removeEventListener( types[--i], handler, false );
            }
        } else {
            this.onmousewheel = null;
        }
    }
};

$.fn.extend({
    mousewheel: function(fn) {
        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
    },
    
    unmousewheel: function(fn) {
        return this.unbind("mousewheel", fn);
    }
});


function handler(event) {
    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
    event = $.event.fix(orgEvent);
    event.type = "mousewheel";
    
    // Old school scrollwheel delta
    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
    
    // New school multidimensional scroll (touchpads) deltas
    deltaY = delta;
    
    // Gecko
    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
        deltaY = 0;
        deltaX = -1*delta;
    }
    
    // Webkit
    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
    
    // Add event and delta to the front of the arguments
    args.unshift(event, delta, deltaX, deltaY);
    
    return ($.event.dispatch || $.event.handle).apply(this, args);
}

})(jQuery);

$(function(){
	var $navLis = $('#header .h-nav li');
	var $navUl = $('#header .h-nav ul');
	var $navWrap = $('#nav-wrap');
	var $slideLis = $('#slide li');
	// 解决图片缓存问题
	var timer = setInterval(function(){
		$(document).scrollTop(0);
		if($(document).scrollTop() == 0){
			clearInterval(timer);
		}
	}, 50);
	$navLis.mouseenter(function(){
		$(this).addClass('bold').siblings().removeClass('bold');
		var left = $(this).position().left;
		var width = $(this).width();
		$navWrap.stop(true).animate({
			left: left + 4,
			width: width + 26
		}, 300);
	});
	$navUl.mouseleave(function(){
		$navWrap.stop(true).animate({
			left: 4, width: 58
		});
		$navLis.eq(0).addClass('bold').siblings().removeClass('bold');
	});
	var winH = $(window).height();
	var index = 0;
	$slideLis.click(function(){
		$(this).addClass('on').siblings().removeClass('on');
		index = $(this).index();
		$('html,body').stop(true).animate({
			scrollTop: winH*index
		}, 500);
	});
	// 鼠标滚轮事件
	$(document).mousewheel(function(){
		var dr = arguments[1];
		if(dr < 0){ // 往下滚
			index++;
			index %= 4;
		}else{ // 往上滚
			index--;
			if(index<0) index = 3;
		}
		$slideLis.eq(index).addClass('on').siblings().removeClass('on');
		$('html,body').stop(true).animate({
			scrollTop: winH*index
		}, 500);
	});
	// 窗口改变时
	$(window).resize(function(){
		winH = $(window).height();
		$(document).scrollTop(winH*index);
	});
});

省市区的三级联动

省：
<select style="width: 100px;" id="pre" onchange="change1(this)">
	<option value="-1">请选择</option>
</select>
市：
<select style="width: 100px;" id="city" onchange="change2(this)">
</select>
区：
<select style="width: 100px;" id="area">
</select>

// 声明省
var pres = ['北京', '上海', '山东'];
// 声明市
var cities = [
	['东城', '海淀', '朝阳'],
	['浦东', '高区'],
	['青岛', '潍坊', '烟台']
];
// 声明区
var areas = [
	[
		['东城一', '东城二', '东城三'],
		['海淀一', '海淀二', '海淀三'],
		['朝阳一', '朝阳二', '朝阳三']
	],
	[
		['浦东一', '浦东二', '浦东三'],
		['高区一', '高区二', '高区三']
	],
	[
		['青岛一', '青岛二', '青岛三'],
		['潍坊一', '潍坊二', '潍坊三'],
		['烟台一', '烟台二', '烟台三']
	]
];
var preEle = document.getElementById('pre');
var cityEle = document.getElementById('city');
var areaEle = document.getElementById('area');

for(var i=0; i<pres.length; i++){
	var op = new Option(pres[i], i);
	// 添加
	preEle.options.add(op);
}
// 触发省份选择事件
var val;
function change1(obj){
	val = obj.value;
	if(val<0){
		cityEle.options.length = 0;
		areaEle.options.length = 0;
		return;
	}
	// 获取城市
	var cs = cities[val];
	// 获取默认区
	var as = areas[val][0];
	cityEle.options.length = 0;
	for(var i=0; i<cs.length; i++){
		var op = new Option(cs[i], i);
		cityEle.options.add(op);
	}
	areaEle.options.length = 0;
	for(var i=0; i<as.length; i++){
		var op = new Option(as[i], i);
		areaEle.options.add(op);
	}
}
// 触发市选择事件
function change2(obj){
	var index = obj.value;
	var as = areas[val][index];
	areaEle.options.length = 0;
	for(var i=0; i<as.length; i++){
		var op = new Option(as[i], i);
		areaEle.options.add(op);
	}
}

放大镜

*{padding:0;margin:0;}
body{
	background: grey;
}
ul li{list-style: none;}
#wrap{width: 400px;height: 500px;margin: 50px 0 0 50px;box-shadow: 0 0 10em #fff;border-radius: 4px;}
#wrap .pic{width: 400px;height: 400px;border-radius: 4px;display: flex;justify-content: center;align-items: center;}
#wrap .pic-cover{position: relative;height: 100%}
#wrap .pic img{height: 400px;border-radius: 4px;}
#wrap .tab{width: 400px;height: 58px;margin-top: 21px;}
/*遮盖层*/
#wrap .cover{background: url(img/cover.png); /*width: 80px;height: 80px;*/position: absolute;top: 0;left: 0;cursor: move;display: none;}
#wrap .show{width: 400px; height: 400px;background: pink;position: absolute;top: 0;right: -410px;display: none;background: url(img/1.jpg);}
#list li{width: 50px; height: 50px;float: left;margin: 0 13px; cursor: pointer;transition: border .5s;border: 2px solid grey;display: flex;justify-content: center;align-items: center;}
#list li.on{border: 2px solid red;}
/*#list li img{width: 50px;height: 50px;position: absolute;}*/

<div id="wrap">
	<div class="pic">
		<div class="pic-cover">
			<img src="img/1.jpg">
			<div class="cover"></div>
			<div class="show"></div>
		</div>
	</div>
	<div class="tab">
		<ul id="list">
			<li class="on"><img src="img/1.jpg"></li>
			<li><img src="img/2.jpg"></li>
			<li><img src="img/3.jpg"></li>
			<li><img src="img/4.jpg"></li>
			<li><img src="img/5.jpg"></li>
		</ul>
	</div>
</div>

$(function(){
	var $tabLis = $('#list li');
	var $img = $('#wrap .pic img');
	var $tabImgs = $('#list li img');
	var $picCover = $('#wrap .pic .pic-cover');
	var $cover = $picCover.find('.cover');
	var $show = $picCover.find('.show');
	var imgArr = []; // 用来存放图片宽高比的属性
	// 执行初始化图片的方法
	init();
	var index = 0;
	$tabLis.hover(function(){
		index =  $(this).index();
		$(this).addClass('on').siblings().removeClass('on');
		var src = $(this).find('img').attr('src');
		// 设置大图样式
		$img.attr({
			src: src,
			width: imgArr[index].width * 400,
			height: imgArr[index].height * 400
		});
		// 设置放大图样式
		$show.css({
			backgroundImage: 'url('+src+')'
		});
	}, function(){
		// $(this).removeClass('on');
	});

	// 初始化底部小图片
	function init(){
		$tabImgs.each(function(i){
			// 获取图片的宽度
			var imgWidth = $(this).width();
			// 获取图片的高度
			var imgHeight = $(this).height();
			// console.log(imgWidth, imgHeight)
			if(imgWidth >= imgHeight){
				$(this).css({width: 50, height: imgHeight*(50/imgWidth)});
				imgArr[i] = {width: 1, height: imgHeight/imgWidth, imgW: imgWidth, imgH: imgHeight};
			}else{
				$(this).css({width: imgWidth*(50/imgHeight), height: 50});
				imgArr[i] = {width: imgWidth/imgHeight, height: 1, imgW: imgWidth, imgH: imgHeight};
			}
		});
	}
	// 鼠标移入图片
	$picCover.mousemove(function(ev){
		// 更改cover大小
		var a = $show.width()*$picCover.width()/imgArr[index].imgW;
		$cover.css({
			width: a,
			height: a
		});
		$cover.show();
		$show.show();
		var e = ev || event;
		// var x = e.clientX; // 相对于可视窗口
		// var y = e.clientY;
		var x = e.pageX; // 相对于文档
		var y = e.pageY;
		var picCoverX = $picCover.offset().left;
		var picCoverY = $picCover.offset().top;
		var minusX = x - picCoverX - $cover.width()/2;
		var minusY = y - picCoverY - $cover.height()/2;
		var maxX = $picCover.width() - $cover.width();
		var maxY = $picCover.height() - $cover.height(); 
		if(minusX<0) minusX = 0;
		if(minusY<0) minusY = 0;
		if(minusX>maxX) minusX=maxX;
		if(minusY>maxY) minusY=maxY;
		$cover.css({
			left: minusX,
			top: minusY
		});
		// 将放大图跟随鼠标移动
		var scaleX = minusX/$picCover.width();
		var scaleY = minusY/$picCover.height();
		var imgWidth = imgArr[index].imgW;
		var imgHeight = imgArr[index].imgH;
		$show.css({
			backgroundPosition: -scaleX*imgWidth+'px -'+scaleY*imgHeight+'px'
		});
	}).mouseout(function(){
		$cover.hide();
		$show.hide();
	});
	$show.mouseover(function(){
		$cover.hide();
		$show.hide();
	}).mousemove(function(){
		return false;
	});
});

酷炫照片墙

*{padding: 0;margin: 0;}
html, body{height: 100%;}
ul li{list-style: none;}
body{background: linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px) 0 64px;background-color: #708090;background-size: 64px 128px;display: flex;justify-content: center;align-items: center;}
#wrap{width: 95%;height: 95%;/*border: 1px solid red;*/position: relative;}
#wrap ul li{width: 125px;height: 125px;box-shadow: 0 0 1px #000;position: absolute;transition: left 1s,top 1s;cursor: pointer;/*background: url(img/big/2.jpg);*/}
#wrap ul li img{transform: scale(0.95);transition: transform 1s;}
#wrap input[type="button"]{position: fixed;top: 50%;display: none;height: 50px}
#wrap .btn-left{left: 0;}
#wrap .btn-right{right: 0;}

<body onselectstart="return false;">
	<div id="wrap">
		<ul></ul>
		<div>
			<input type="button" class="btn-left" value="上一张">			
			<input type="button" class="btn-right" value="下一张">			
		</div>
	</div>
</body>

$(function(){
	var $ul = $('#wrap ul');
	var $wrap = $('#wrap');
	var count = 24;
	initLi();
	var $lis = $('#wrap li');
	var $img = $('#wrap li img');
	var $btn = $('#wrap input[type="button"]');
	var onOff = true;
	var index = 0;
	var liTime = 0;
	var btnTime = 0;
	function initLi(){
		for(var i=0; i<count; i++){
			var $li = $('<li><img src="img/'+(i+1)+'.jpg"/></li>');
			$ul.append($li);
		}
	}
	liPosition(); // li初始定位
	liRotate(); // li初始化度数
	// 窗口改变时
	$(window).resize(liPosition);
	// li的初始定位
	function liPosition(){
		var wrapWidth = $wrap.width();
		var wrapHeight = $wrap.height();
		var w = (wrapWidth - 125*6)/5;
		var h = (wrapHeight - 125*4)/3;
		$lis.each(function(i){
			var iX = i%6;
			var iY = parseInt(i/6);
			$(this).css({
				left: 125*iX + w*iX, top: 125*iY + h*iY,
				backgroundPosition: -iX*125+'px ' + (-iY*125)+'px'
			})
		});
	}
	// li的旋转度数
	function liRotate(){
		$lis.each(function(i){
			var r = (Math.random()-0.5)*60;
			$(this).css({transform: 'rotate('+r+'deg)'})
		});
	}
	// 点击li的时候
	$lis.click(function(){
		if(new Date().getTime() - liTime > 2000){
			liTime = new Date().getTime();
			if(onOff){
				index = $(this).index();
				$img.css('transform', 'scale(1)');
				setTimeout(function(){
					resetLi();
					$img.fadeOut(1000);
					$lis.css('background-image', 'url(img/big/'+(index+1)+'.jpg)');
					$btn.show();
				}, 1000);
				// 解绑 $(window).resize(liPosition);
				$(window).off('resize');
				$(window).resize(resetLi);
				onOff = false;
			}else{
				$img.fadeIn(1000, function(){
					$lis.css('background-image', '');
					$(this).css('transform', 'scale(0.95)');
				});
				liPosition();
				liRotate();
				$btn.hide();
				onOff = true;
			}
		}
	});
	// 重置li样式
	function resetLi(){
		var wrapWidth = $wrap.width();
		var wrapHeight = $wrap.height();
		var left = (wrapWidth - 125*6)/2;
		var top = (wrapHeight - 125*4)/2;
		$lis.each(function(i){
			var iX = i%6;
			var iY = parseInt(i/6);
			$(this).css({left: 125*iX + left, top: 125*iY + top, transform: 'rotate(0deg)', transition: 'left 1s, top 1s, transform 1s'});
		});
	}
	// 点击左右按钮
	$btn.click(function(){
		if(new Date().getTime() - btnTime > 1200){
			btnTime = new Date().getTime();
			var i = $(this).index();
			if(i){ // 右按钮
				index++;
				index %= count;
			}else{
				index--;
				index = index<0 ? count-1 : index;
			}
			// $lis.css('background-image', 'url(img/big/'+(index+1)+'.jpg)');
			switchLi();
		}
	});
	// 按钮切换效果
	function switchLi(){
		var arr = [];
		for(var i=0; i< count; i++){
			arr[i] = i;
		}
		var timer = setInterval(function(){
			if(arr.length>0){
				var r = Math.floor(Math.random()*arr.length); // 0-23
				$lis.eq(arr[r]).css('background-image', 'url(img/big/'+(index+1)+'.jpg)');
				arr.splice(r, 1);
			}else{
				clearInterval(timer);
			}
		}, 30);
	}
	// 屏蔽鼠标右键
	$(document).contextmenu(function(){
		return false;
	});
});

瀑布流

*{padding: 0;margin: 0;}
body{
	background:
	linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
	linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
	linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
	background-color:#e1ebbd;
	background-size: 128px 128px;
	-webkit-user-select: none; 
}
#container{width:900px;margin:20px auto;/*border:1px dotted #666;*/position:relative;}
#container .item{position:absolute;border:2px solid #fff;box-shadow:0 0 1em pink;}
#container .item img{display:block;}
#loader{width:100%;height:50px;background:url(img/loader.gif) no-repeat center;position:fixed;bottom:10px;display:none;}
#container .item .p1{background:#fff;width:180px;padding:10px;font-size:12px;font-family:"楷体";word-break: break-word;}
#loader{width:100%;height:50px;background:url(img/loader.gif) no-repeat center;position:fixed;bottom:10px;display:none;}
/*滚轮兼容*/
::-webkit-scrollbar{width:10px;height:6px;background:#ccc;}
::-webkit-scrollbar-button{background-color:#e5e5e5;}
::-webkit-scrollbar-track{background:#999;}
::-webkit-scrollbar-track-piece{background:#ccc}
::-webkit-scrollbar-thumb{background:#666;}
::-webkit-scrollbar-corner{background:#82AFFF;}
::-webkit-scrollbar-resizer{background:#FF0BEE;}
scrollbar{-moz-appearance:none !important;background:rgb(0,255,0) !important;}
scrollbarbutton{-moz-appearance:none !important;background-color:rgb(0,0,255) !important;}
scrollbarbutton:hover{-moz-appearance:none !important;background-color:rgb(255,0,0) !important;}

<body onselectstart="return false;">
	<div id="container"></div>
	<div id="loader"></div>
</body>

$(function(){
	// 获取容器对象
	var $container = $('#container');
	// 定义图片的初始宽度
	var imgWidth = 200;
	// 定义图片之间的间隙
	var imgSpace = 12;
	// 真实宽度
	var outerWidth = imgWidth + imgSpace;
	// 获取图片的URL
	var url = 'http://www.wookmark.com/api/json/popular?callback=?';
	// 页码
	var pageNow = 0;
	var lock = true;
	//加载图片
	var $loader = $("#loader");
	// 图片列数
	var columns = 0;
	initColumns();
	function initColumns(){
		columns = Math.floor($(window).width() / outerWidth);
		if(columns<2){
			columns = 2;
		}
		$container.width(columns*outerWidth - imgSpace);
	}

	//循环列数
	var arrTop = [];
	var arrLeft = [];
	for(var i=0;i<columns;i++){
		arrTop.push(0);
		arrLeft.push(i*outerWidth);
	}
	getData();
	// 获取图片数据
	function getData(){
		if(lock){
			lock = false;
			$loader.show();
			$.getJSON(url, {page: pageNow}, function(data){
				$.each(data, function(index, obj){
					if(obj.width!=0 && obj.height!=0){
						var height = imgWidth/obj.width*obj.height;
						var $div = $('<div></div>');
						var minIndex = getMinIndex(arrTop);
						$div.addClass('item').animate({
							top: arrTop[minIndex],
							left: arrLeft[minIndex]
						}, 500).html('<a href="'+obj.image+'" title="'+obj.title+'" target="_blank"><img src="'+obj.preview+'" width="'+imgWidth+'" height="'+height+'"/></a><p class="p1">'+obj.title+'</p>');
						$container.append($div);
						arrTop[minIndex] += (height+imgSpace+$div.addClass('item').find('.p1').height());
					}
				});
				lock = true;
				$loader.hide();
			});
		}
	}
	$(window).on({
		'scroll': function(){// 滚动加载更多图片
			var minIndex = getMinIndex(arrTop);
			var minHeight = arrTop[minIndex] + $container.offset().top;
			var scrollHeight = $(window).height() + $(window).scrollTop();
			if(scrollHeight >= minHeight && lock){
				pageNow++;
				getData();
				console.log(pageNow)
			}
		},
		resize: function(){// 窗口大小改变时
			initColumns();
			arrLeft = [];
			arrTop = [];
			for(var i=0; i<columns; i++){
				arrTop.push(0);
				arrLeft.push(i*outerWidth);
			}
			var $items = $container.find('.item');
			$items.each(function(){
				var minIndex = getMinIndex(arrTop);
				$(this).animate({
					top: arrTop[minIndex],
					left: arrLeft[minIndex]
				});
				arrTop[minIndex] += ($(this).height() + imgSpace +$(this).find('.p1').height());
			});
		}
	});
	// 获取数组中最小值的索引
	function getMinIndex(arr){
		var value = arr[0];
		var index = 0;
		for(var i=1; i<arr.length; i++){
			if(arr[i] < value){
				value = arr[i];
				index = i;
			}
		}
		return index;
	}
});