brickfolio是一款jQuery动态响应式网格布局插件

brickfolio是一款jQuery动态响应式网格布局插件。通过该插件可以动态生成响应式的网格布局,可以制作8种显示网格卡片的动画效果,可以对网格内容进行过滤,还可以设置不显示无效的图片内容。

JavaScript 表格/网格

访问GitHub主页

共11Star

详细介绍

brickfolio

Better Grid Layouts - Especially for Portfolio Pages!

Install

Install using Bower: bower install brickfolio

Or copy the following files into your project:

Usage

In your HTML:

<div class="brickfolio">
	<div class="bf-item">
		<img data-src="image1.png">
		<h4>Lorem ipsum dolor sit</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Eadem nunc mea adversum te oratio est.</p>
	</div>
	<div class="bf-item">
		<img data-src="image2.png">
		<h4>Quare attende, quaeso</h4>
		<p>Quare attende, quaeso. Sed plane dicit quod intellegit. Non semper, inquam;</p>
	</div>
</div>

In your Javascript:

jQuery(function($){
  $('.brickfolio').brickfolio({
		animation: 'fly', // drop|fade-in|flip|fly|pop-up|scale-up|slide-up|swing-down
		filter: '.ignore-item', // a selector used to filter out items
		gutter: 40, // number in pixels of the gutter between items
		responseTime: 200, // number in milliseconds before the layout is redrawn after the window resizes
		hideErrors: false, // automatically hides items where the image fails to load
		classes: {
			container: 'brickfolio', // class added to the container
			loaded: 'bf-loaded', // class added to the container once items are loaded
			animated: 'bf-animated', // class added to the container to indicate animations are supported and being used
			item: 'bf-item', // class added to items within the container
			error: 'bf-error', // class added to items that have broken images
			filtered: 'bf-filtered' // class added to filtered items
		}
	});
});

In your CSS:

.bf-item {
	/* The brickfolio item must have a width set. */
	width: 250px;
}

Copyright ©️ 2014 FooPlugins

推荐源码