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