国外jQuery动态瀑布流布局代码

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

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

以下是国外jQuery动态瀑布流布局代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<title>jQuery国外动态瀑布流布局网页特效</title>
<link rel='stylesheet' href='style.css' media='screen' />
<script src="jquery-1.7.2.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="blocksit.min.js"></script>
<script>
$(document).ready(function() {
	//vendor script
	$('#header')
	.css({ 'top':-50 })
	.delay(1000)
	.animate({'top': 0}, 800);
	
	$('#footer')
	.css({ 'bottom':-15 })
	.delay(1000)
	.animate({'bottom': 0}, 800);
	
	
	$('#container').BlocksIt({
		numOfCol: 4,
		offsetX: 8,
		offsetY: 8
	});
	
	console.log($('#container').height());
});
</script>
</head>
<body>

    <div id="content">
	

<!--DEMO start-->
<!-- Content -->
<section id="wrapper">
<div id="container">
	<div class="block description">
		<h3>Introduction</h3>
		<p><strong>BlocksIt.js</strong> is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into '<em>blocks</em>' and position them in well-arranged grid layout like <a href="http://13141618.taobao.com">Pinterest</a>.</p>
	</div>
	<div class="nobox" data-size="2">
		<h2>Blocks<span>It</span>.js</h2>
		<h3>Dynamic Grid Layout jQuery Plugin</h3>
	</div>
	<div class="block" style="text-align:center">
		<p>Download <strong>BlocksIt.js</strong> at <br/>
	</div>
	<div class="block log">
		<h3>Change Log</h3>
		<p>
			<strong>Version 1.0</strong> ?First Release, 24th April 2012
		</p>
	</div>
	
	<div class="block" data-size="2">
		<h3>How to Use?</h3>
		<p><pre>
$(document).ready(function() {
	$('#container').BlocksIt({
		numOfCol: 4,
		offsetX: 8,
		offsetY: 8,
		blockElement: '.block'
	});
});</pre></p>
	</div>
	
	<div class="block options">
		<h3>Plugin Options</h3>
		<p>
			<strong>numOfCol:</strong> <br/>
			<em>Type: Int ( Default: 5 )</em> <br/>
			<span>The number of columns to be created.</span>
		</p>	
		<p>
			<strong>offsetX:</strong><br/>
			<em>Type: Int ( Default: 5 )</em><br/>
			<span>Margin left and right for each block.</span>
		</p>	
		<p>
			<strong>offsetY:</strong><br/>
			<em>Type: Int ( Default: 5 )</em><br/>
			<span>Margin top and bottom for each block.</span>
		</p>
		<p>
			<strong>blockElement:</strong><br/>
			<em>Type: String ( Default: div )</em><br/>
			<span>Targeted child element, which will converted into blocks.</span>
		</p>	
	</div>
	<div class="block">
		<h3>License</h3>
		<p><strong>BlocksIt.js</strong> is licensed under the GNU General Public License version 2 or later.</p>
	</div>
	
	<div class="block demo">
		<h3>Demo 1</h3>
		<p>
		<a class="imgholder" href="demo1/">
			<img src="images/random-grid.jpg" width="210" height="150" alt="" />
		</a>
		Dynamic grid layout with random generated blocks. <strong>REFRESH</strong> the page and see different result!
		</p>
	</div>
	<div class="block demo">
		<h3>Demo 2</h3>
		<p>
		<a class="imgholder" href="demo2/">
			<img src="images/pinterest.jpg" width="210" height="150" alt="" />
		</a>
		Pinterest dynamic grid layout integrated with CSS3 Transitions. <strong>RESIZE</strong> your browser to animate these blocks! 
		</p>
	</div>
	<div class="block demo">
		<h3>Buggy?</h3>
		<p>Something's not working? Or any other questions regarding this plugin please let me know using comments form in .</p>
	</div>
</div>
</section>


<!--DEMO end-->

	</div>
 <div style="display:none">
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F5f6ca1adc4c0cf51a5c1732ecc24a768' type='text/javascript'%3E%3C/script%3E"));
</script>
</div>
</body>
</html>

JS代码(blocksit.min.js):

(function(a){
	var b={
	numOfCol:5,offsetX:5,offsetY:5,blockElement:"div"}
;
	var c,d;
	var e=[];
	if(!Array.prototype.indexOf){
	Array.prototype.indexOf=function(a){
	var b=this.length>>>0;
	var c=Number(arguments[1])||0;
	c=c<0?Math.ceil(c):Math.floor(c);
	if(c<0)c+=b;
	for(;
	c<b;
	c++){
	if(c in this&&this[c]===a)return c}
return-1}
}
var f=function(){
	e=[];
	for(var a=0;
	a<b.numOfCol;
	a++){
	g("empty-"+a,a,0,1,-b.offsetY)}
}
;
	var g=function(a,c,d,f,g){
	for(var h=0;
	h<f;
	h++){
	var i=new Object;
	i.x=c+h;
	i.size=f;
	i.endY=d+g+b.offsetY*2;
	e.push(i)}
}
;
	var h=function(a,b){
	for(var c=0;
	c<b;
	c++){
	var d=i(a+c,"x");
	e.splice(d,1)}
}
;
	var i=function(a,b){
	for(var c=0;
	c<e.length;
	c++){
	var d=e[c];
	if(b=="x"&&d.x==a){
	return c}
else if(b=="endY"&&d.endY==a){
	return c}
}
}
;
	var j=function(a,b){
	var c=[];
	for(var d=0;
	d<b;
	d++){
	c.push(e[i(a+d,"x")].endY)}
var f=Math.min.apply(Math,c);
	var g=Math.max.apply(Math,c);
	return[f,g,c.indexOf(f)]}
;
	var k=function(a){
	if(a>1){
	var b=e.length-a;
	var c=false;
	var d,f;
	for(var g=0;
	g<e.length;
	g++){
	var h=e[g];
	var i=h.x;
	if(i>=0&&i<=b){
	var k=j(i,a);
	if(!c){
	c=true;
	d=k;
	f=i}
else{
	if(k[1]<d[1]){
	d=k;
	f=i}
}
}
}
return[f,d[1]]}
else{
	d=j(0,e.length);
	return[d[2],d[0]]}
}
;
	var l=function(a,c){
	if(!a.data("size")||a.data("size")<0){
	a.data("size",1)}
else if(a.data("size")>b.numOfCol){
	a.data("size",b.numOfCol)}
var e=k(a.data("size"));
	var f=d*a.data("size")-(a.outerWidth()-a.width());
	a.css({
	width:f-b.offsetX*2,left:e[0]*d,top:e[1],position:"absolute"}
);
	var i=a.outerHeight();
	h(e[0],a.data("size"));
	g(a.attr("id"),e[0],e[1],a.data("size"),i)}
;
	a.fn.BlocksIt=function(g){
	if(g&&typeof g==="object"){
	a.extend(b,g)}
c=a(this);
	d=c.width()/b.numOfCol;
	f();
	c.children(b.blockElement).each(function(b){
	l(a(this),b)}
);
	var h=j(0,e.length);
	c.height(h[1]+b.offsetY);
	return this}
}
)(jQuery)

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