jQuery同宽网格瀑布流插件代码

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

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

以下是 jQuery同宽网格瀑布流插件代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery同宽网格瀑布流插件</title>
<!--<link href="http://fonts.useso.com/css?family=Roboto:300,500" rel="stylesheet" type="text/css">-->
<link rel="stylesheet" type="text/css" href="demo/css/styles.css">
<link rel="stylesheet" type="text/css" href="demo/css/columns.css">
</head>
<body>

<div class="about">
	<div class="clear"></div>
	<h2 class="gap">Demo</h2>
	<p class="gap">
		The screen on the right shows a demo of Elastic Columns.<br />
		Please note that the plugin does not provide animations or filters, but it is easy to implement it by yourself;
		all you have to do is to add or remove items from the container, and refresh the grid.
	</p>
	<p class="gap buttons">
		<button class="event-add">添加随机物品</button>
		<button class="event-reorder">随机排序的项目</button>
		<span class="loader"></span>
	</p>
	<div class="clear"></div>
	<h2 class="gap">Installation</h2>
	<p class="gap">
		You can chekout the Git repository or use bower:
	</p>
	<pre class="gap">bower install elastic-columns</pre>
	<div class="clear"></div>
	<h2 class="gap">Options</h2>
	<h3 class="gap">Columns count</h3>
	<pre class="tiny-gap">$('.container').elasticColumns({columns: 3});</pre>
	<p class="tiny gap">
		You probably want to set a number of colums to use.
		The value may be changed later using the plugin API.
	</p>
	<h3 class="gap">Margins</h3>
<pre class="tiny-gap">$('.container').elasticColumns(
{
innerMargin: 10, // the gap between two tiles
outerMargin: 20  // the gap between the tiles and
				the edge of the container
});</pre>
	<p class="tiny gap">
		You can tell the plugin to use margins if you don't want to set them yourself in your CSS styles.
	</p>
	<div class="clear"></div>
	<h2 class="gap">API</h2>
	<p class="gap">
		The plugin provides a very simple API.<br />
		Actually, you will only need a few things:
	</p>
	<h3 class="gap">Refreshing the layout</h3>
	<pre class="tiny-gap">$('.container').elasticColumns('refresh');</pre>
	<p class="tiny gap">
		You may want to refresh the layout when the user resizes the window, or when you add new items to the grid.<br />
		To insert new content, you may just append it to your container; the plugin will handle it.<br />
		<em>If you append pictures, be sure to wait them to be loaded before refreshing the layout, or the calculations may be false.</em>
	</p>
	<h3 class="gap">Modifying settings on the fly</h3>
	<pre class="tiny-gap">$('.container').elasticColumns('set', 'columns', 4);</pre>
	<p class="tiny gap">
		What if you are building a responsive website ?<br />
		You may want to change the number of columns depending on the container width.<br />
		<em>When you are updating a parameter, don't forget to refresh the grid.</em>
	</p>
	<h3 class="gap">Destroying the layout</h3>
	<pre class="tiny-gap">$('.container').elasticColumns('destroy');</pre>
	<p class="tiny gap">
		If you want to restore the layout to its initial state.
	</p>
	<h3 class="gap">Ignoring items</h3>
	<pre class="tiny-gap">&lt;div class="item elastic-columns-ignore"&gt;&lt;/div&gt;</pre>
	<p class="tiny gap">
		If may add the <code>elastic-columns-ignore</code> class to some items if you don't want them to be positionned on the grid.<br />
		This can be useful if you are filtering the grid content and don't want to remove items on the fly.
	</p>
	<div class="clear"></div>
</div>
<div class="columns">
	<div class="item">
		<img src="images/2.jpg">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Quisque vitae lorem eget eros dictum varius.
		</p>
	</div>
	<div class="item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Quisque vitae lorem eget eros dictum varius.
			Donec tortor purus, convallis ut dapibus cursus, fringilla eleifend libero.
			Vestibulum accumsan enim non lectus aliquam, eget accumsan nibh sollicitudin.
		</p>
	</div>
	<div class="item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Quisque vitae lorem eget eros dictum varius.
			Donec tortor purus, convallis ut dapibus cursus, fringilla eleifend libero.
			Vestibulum accumsan enim non lectus aliquam, eget accumsan nibh sollicitudin.
		</p>
	</div>
	<div class="item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Quisque vitae lorem eget eros dictum varius.
			Donec tortor purus, convallis ut dapibus cursus, fringilla eleifend libero.
			Vestibulum accumsan enim non lectus aliquam, eget accumsan nibh sollicitudin.
			Donec tortor purus, convallis ut dapibus cursus, fringilla eleifend libero.
			Vestibulum accumsan enim non lectus aliquam, eget accumsan nibh sollicitudin.
		</p>
	</div>
	<div class="item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Quisque vitae lorem eget eros dictum varius.
		</p>
	</div>
	<div class="item">
		<img src="images/1.jpg">
		<h4>Lorem ipsum dolor</h4>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Quisque vitae lorem eget eros dictum varius.
			Donec tortor purus, convallis ut dapibus cursus, fringilla eleifend libero.
			Vestibulum accumsan enim non lectus aliquam, eget accumsan nibh sollicitudin.
		</p>
	</div>
	<div class="item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Quisque vitae lorem eget eros dictum varius.
			Donec tortor purus, convallis ut dapibus cursus, fringilla eleifend libero.
			Vestibulum accumsan enim non lectus aliquam, eget accumsan nibh sollicitudin.
		</p>
	</div>
	<div class="item">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			Quisque vitae lorem eget eros dictum varius.
			Donec tortor purus, convallis ut dapibus cursus, fringilla eleifend libero.
			Vestibulum accumsan enim non lectus aliquam, eget accumsan nibh sollicitudin.
			Donec tortor purus, convallis ut dapibus cursus, fringilla eleifend libero.
			Vestibulum accumsan enim non lectus aliquam, eget accumsan nibh sollicitudin.
		</p>
	</div>
</div>
<script type="text/javascript" src="demo/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="src/elastic-columns.js"></script>
<script type="text/javascript" src="demo/js/elastic-columns-demo.js"></script>
<script type="text/javascript">
	window.onload = function()
	{
		new ElasticColumnsDemo();
	};
</script>
</body>
</html>

JS代码(elastic-columns-demo.js):

/** * Elastic Columns demo page */
function ElasticColumnsDemo(){
	this.init();
}
;
	/** * Inits the page */
ElasticColumnsDemo.prototype.init = function(){
	// DOM this.$container = $('.columns');
	this.$loader = $('.loader');
	// Creates and displays the grid this.$container.elasticColumns({
	columns:this.getColumnsCount(),innerMargin:20,outerMargin:20}
);
	this.displayItems();
	// Resize event:tell the plugin to refresh the layout $(window).on('resize',$.proxy(this,'onResize'));
	// Adds random items $('.event-add').on('click',$.proxy(this,'onAddRandomItems'));
	$('.event-reorder').on('click',$.proxy(this,'onRandomlyReorderItems'));
}
;
	/** * Adds random items * @param evt */
ElasticColumnsDemo.prototype.onAddRandomItems = function(evt){
	evt.preventDefault();
	this.$loader.fadeIn(200);
	// Builds a random array var items = this.$container.children(':not(.elastic-columns-ignore)').get();
	for (var index = items.length - 1;
	index > 0;
	index -= 1){
	var random_index = Math.floor(Math.random() * (index + 1));
	var temp = items[index];
	items[index] = items[random_index];
	items[random_index] = temp;
}
items = items.slice(0,3);
	// Adds the items to the container for(var index = 0;
	index < items.length;
	index += 1){
	var $new_item = $(items[index]).clone().hide();
	this.$container.append($new_item);
}
// Refresh the grid and show the items,when the content has been loaded var self = this;
	var $images = this.$container.children(':hidden').find('img');
	if ($images.length > 0){
	$images.on('load',$.proxy(this,'onNewContentLoaded'));
	$images.on('error',$.proxy(this,'onNewContentLoaded'));
}
else{
	this.onNewContentLoaded();
}
}
;
	/** * Displays new content when it has been loaded */
ElasticColumnsDemo.prototype.onNewContentLoaded = function(){
	this.$container.elasticColumns('refresh');
	this.displayItems();
}
;
	/** * Randomly reorder items * @param evt */
ElasticColumnsDemo.prototype.onRandomlyReorderItems = function(evt){
	evt.preventDefault();
	var items = this.$container.children(':not(.elastic-columns-ignore)').get();
	for (var index = 0;
	index < items.length - 1;
	index += 1){
	var random_index = Math.floor(Math.random() * index);
	this.$container.append($(items[random_index]));
}
this.$container.elasticColumns('refresh');
}
;
	/** * Returns the number of columns depending on the container width */
ElasticColumnsDemo.prototype.getColumnsCount = function(){
	var grid_width = $('.columns').width();
	var column_width = grid_width;
	var columns = 1;
	while(column_width > 250){
	columns += 1;
	column_width = grid_width / columns;
}
return columns;
}
;
	/** * Resizes the window */
ElasticColumnsDemo.prototype.onResize = function(){
	this.$container.elasticColumns('refresh');
	this.$container.elasticColumns('set','columns',this.getColumnsCount());
}
;
	/** * Displays the hidden grid items */
ElasticColumnsDemo.prototype.displayItems = function(){
	var delay = 0;
	this.$container.children(':hidden:not(.elastic-columns-ignore)').each(function(){
	$(this).delay(delay).fadeIn(300);
	delay += 150;
}
);
	this.$loader.delay(delay).fadeOut(200);
}
;

JS代码(elastic-columns.min.js):

/* Elastic Columns 0.1.1 - https://github.com/johansatge/elastic-columns */
!function(a){
	a.elasticColumns=function(b,c){
	this.defaults={
	columns:3,innerMargin:10,outerMargin:10}
,this.settings={
}
,this.$element=a(b),this.columns=[],this.init=function(){
	this.settings=a.extend({
}
,this.defaults,c),this.buildLayout()}
,this.buildLayout=function(){
	for(var b=this.$element.children(":not(.elastic-columns-ignore)"),c=this.$element.width(),d=(c-this.settings.innerMargin*(this.settings.columns-1)-2*this.settings.outerMargin)/this.settings.columns,e=0;
	e<this.settings.columns;
	e+=1)this.columns[e]=this.settings.outerMargin;
	for(var f=0;
	f<b.length;
	f+=1){
	for(var g=a(b.get(f)),h=0,i=0;
	i<this.settings.columns;
	i+=1)this.columns[i]<this.columns[h]&&(h=i);
	var j=parseInt(g.css("padding-left"))+parseInt(g.css("padding-right")),k=parseInt(g.css("padding-top"))+parseInt(g.css("padding-bottom"));
	g.css("position","absolute"),g.css("width",d-j+"px"),g.css("left",this.settings.outerMargin+this.settings.innerMargin*h+h*d+"px"),g.css("top",this.columns[h]+"px"),this.columns[h]+=g.outerHeight()+this.settings.innerMargin+k}
for(var l=0,i=0;
	i<this.settings.columns;
	i+=1)this.columns[i]>this.columns[l]&&(l=i);
	this.$element.outerHeight(this.columns[l]+"px")}
,this.destroyLayout=function(){
	for(var b=this.$element.children(":not(.elastic-columns-ignore)"),c=0;
	c<b.length;
	c+=1){
	var d=a(b.get(c));
	d.css({
	position:"",width:"",left:"",top:""}
)}
this.$element.css({
	height:""}
)}
}
,a.fn.elasticColumns=function(b,c,d){
	return this.each(function(){
	var e=a(this).data("elasticColumns");
	"undefined"==typeof e?(e=new a.elasticColumns(this,b),a(this).data("elasticColumns",e),e.init()):("refresh"==b&&e.buildLayout(),"set"==b&&(e.settings[c]=d),"destroy"==b&&e.destroyLayout())}
)}
}
(jQuery);

JS代码(Gruntfile.js):

module.exports = function(grunt){
	grunt.initConfig({
	bower:grunt.file.readJSON('bower.json'),uglify:{
	options:{
	banner:'/* <%= bower.title %> <%= bower.version %> - <%= bower.homepage %> */
\n'}
,dist:{
	files:{
	'src/<%= bower.name %>.min.js':'src/<%= bower.name %>.js'}
}
}
}
);
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.registerTask('default',['uglify']);
}
;

CSS代码(columns.css):

/** * Elastic columns styles */
.columns{position:relative;z-index:1;left:50%;width:50%;top:0;}
.columns .item{display:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;overflow:hidden;background:#F5F1E6;font-size:13px;text-shadow:0 1px #ffffff;}
.columns .item h4{font-weight:500;font-size:14px;line-height:14px;padding:10px 10px 0 10px;}
.columns .item p{padding:10px;}
.columns .item img{width:100%;}

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