jQuery可自定义高度图片瀑布流代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery可自定义高度图片瀑布流代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta content='initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width' name='viewport'>
<title>jQuery可自定义高度图片瀑布流代码</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href='css/style.css' rel='stylesheet'>
</head>
<body>
<div class="htmleaf-container">
	<div id='controls-top'>
	  <div class='control-button one'>Small</div>
	  <div class='control-button two'>Medium</div>
	  <div class='control-button three'>Large</div>
	  <div class='control-button five'>Gutter Off</div>
	  <div class='control-button four'>Gutter On</div>
	  <div class='control-button six'>Optimized</div>
	  <div class='control-button seven'>Ordinal</div>
	  <div class='control-button eight'>Fluid</div>
	  <div class='control-button nine'>Set columns</div>
	  <div class='control-button twelve'>Width 200</div>
	  <div class='control-button eleven'>Width 320</div>
	  <div class='control-button ten'>Clear</div>
	</div>
	<div id='wrapper'>
	  <div class='grid-wrapper'>
		<div class='grid-item'>
		  <img src='picture/1.jpg'>
		</div>
		<div class='grid-item'>
		  <img src='picture/2.jpg'>
		</div>
		<div class='grid-item'>
		  <img src='picture/3.jpg'>
		</div>
		<div class='grid-item'>
		  <img src='picture/4.jpg'>
		</div>
		<div class='grid-item'>
		  <img src='picture/5.jpg'>
		</div>
		<div class='grid-item'>
		  <img src='picture/6.jpg'>
		</div>
		<div class='grid-item'>
		  <img src='picture/7.jpg'>
		</div>
		<div class='grid-item'>
		  <img src='picture/8.jpg'>
		</div>
		<div class='grid-item'>
		  <img src='picture/9.jpg'>
		</div>
	  </div>
	</div>
	<div id='controls-bottom'>
	  <input class='control-input one' placeholder='添加一张图片的URL看看效果！' type='url'>
	  <div class='control-button bottom-one'>添加</div>
	</div>
</div>

<script src='js/raf.js'></script>
<script src='js/jquery.js'></script>
<script src='js/transit.js'></script>
<script src='js/velocity.js'></script>
<script src='js/imgload.adem.js'></script>
<script src='js/stackgrid.adem.js'></script>
<script src='js/website.js'></script>
</body>
</html>

JS代码(raf.js):

// http://paulirish.com/2011/requestanimationframe-for-smart-animating/// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel// MIT license(function(){
	var lastTime = 0;
	var vendors = ['ms','moz','webkit','o'];
	for(var x = 0;
	x < vendors.length && !window.requestAnimationFrame;
	++x){
	window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
	window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback,element){
	var currTime = new Date().getTime();
	var timeToCall = Math.max(0,16 - (currTime - lastTime));
	var id = window.setTimeout(function(){
	callback(currTime + timeToCall);
}
,timeToCall);
	lastTime = currTime + timeToCall;
	return id;
}
;
	if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id){
	clearTimeout(id);
}
;
}
());

JS代码(website.js):

(function(){
	var t,n,o,i,c,e,r;
	n=$(window),t=$(document),e={
	wrapper:$(".grid-wrapper"),item:$(".grid-item")}
,e.wrapper.hide(),c=$(".control-button"),i={
	one:$(".control-button.one"),two:$(".control-button.two"),three:$(".control-button.three"),four:$(".control-button.four"),five:$(".control-button.five"),six:$(".control-button.six"),seven:$(".control-button.seven"),eight:$(".control-button.eight"),nine:$(".control-button.nine"),ten:$(".control-button.ten"),eleven:$(".control-button.eleven"),twelve:$(".control-button.twelve"),bottom_one:$(".control-button.bottom-one")}
,r={
	one:$(".control-input.one")}
,o=function(t){
	var n,o;
	n=$('<div class="grid-item"><img src="'+t+'"></div>'),o=e.wrapper,$.imgload(t,function(){
	return n.appendTo(e.wrapper),$.stackgrid.append(n)}
)}
,n.on("load",function(){
	return e.wrapper.show().fadeIn(),$.stackgrid(".grid-wrapper",".grid-item",{
	move:function(t,n,o,i){
	t.stop().velocity({
	left:n,top:o}
,500,function(){
	return i()}
)}
,scale:function(t,n,o,i){
	t.stop().velocity({
	height:n,width:o}
,function(){
	return i()}
)}
}
),t.on("click",".grid-item",function(){
	var t;
	t=$(this),t.remove(),$.stackgrid.restack()}
),i.bottom_one.on("click",function(){
	var t;
	t=r.one.val(),o(t),r.one.val("")}
),c.on("click",function(t){
	t.preventDefault()}
),i.one.on("click",function(){
	var t;
	t="img/small.png",o(t)}
),i.two.on("click",function(){
	var t;
	t="img/medium.png",o(t)}
),i.three.on("click",function(){
	var t;
	t="img/large.png",o(t)}
),i.four.on("click",function(){
	$.stackgrid.config.gutter=20,$.stackgrid.restack()}
),i.five.on("click",function(){
	$.stackgrid.config.gutter=0,$.stackgrid.restack()}
),i.six.on("click",function(){
	$.stackgrid.config.is_optimized=!0,$.stackgrid.restack()}
),i.seven.on("click",function(){
	$.stackgrid.config.is_optimized=!1,$.stackgrid.restack()}
),i.eight.on("click",function(){
	$.stackgrid.config.is_fluid=!0,$.stackgrid.restack()}
),i.nine.on("click",function(){
	$.stackgrid.config.is_fluid=!1,$.stackgrid.restack()}
),i.ten.on("click",function(){
	$(".grid-item").remove(),$.stackgrid.reset(),$.stackgrid.restack()}
),i.eleven.on("click",function(){
	$.stackgrid.config.column_width=320,$.stackgrid.reset(),$.stackgrid.restack()}
),i.twelve.on("click",function(){
	$.stackgrid.config.column_width=200,$.stackgrid.reset(),$.stackgrid.restack()}
)}
)}
).call(this);

CSS代码(style.css):

@import url(http://fonts.useso.com/css?family=Lato:400,700,400italic,700italic);html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
body,.control-input{color:#333333;font-family:"Lato",Helvetica,sans-serif;font-size:16px;line-height:1.5em;}
body{background-color:#e8e8e8;}
#header{background:#F2F2F2;height:64px;line-height:64px;padding-top:40px;text-align:center;width:100%;}
#header h1 a{-webkit-transition:0.3s ease;-moz-transition:0.3s ease;transition:0.3s ease;color:#32d0ff;font-size:32px;font-weight:700;font-style:italic;text-decoration:none;}
#header h1 a:hover{color:#00c4fe;}
#controls-top,#controls-bottom{background-color:#f0f0f0;line-height:72px;min-height:72px;text-align:center;width:100%;}
#controls-bottom{bottom:0;position:fixed;left:0;}
.control-input{box-sizing:border-box;border:1px solid rgba(210,210,210,0.5);border-radius:4px;display:inline-block;height:38px;padding:0 1em;width:50%;vertical-align:middle;}
.control-input::-webkit-input-placeholder{font-weight:300;letter-spacing:1px;}
.control-input::-moz-placeholder{font-weight:300;letter-spacing:1px;}
.control-input:-moz-placeholder{font-weight:300;letter-spacing:1px;}
.control-input:-ms-input-placeholder{font-weight:300;letter-spacing:1px;}
.control-input:focus{border:1px solid #32d0ff;outline:none;}
.control-button{-webkit-transition:0.3s ease;-moz-transition:0.3s ease;transition:0.3s ease;background-color:#31cef5;border-radius:4px;color:white;cursor:pointer;display:inline-block;height:38px;font-size:14px;line-height:38px;margin:0 0.25em;padding:0 1.5em;vertical-align:middle;}
.control-button:hover{background-color:#0bbce8;}
#wrapper{margin-bottom:72px;overflow-x:hidden;text-align:center;width:100%;}
.grid-wrapper{margin:0 auto;position:relative;}
.grid-item{display:block;cursor:pointer;position:absolute;margin:0 auto;}
.grid-item img{display:block;height:auto;width:100%;}

附件:下载该文件资源,减少时间成本(增值服务)