Better Grid Layouts - Especially for Portfolio Pages!
Install using Bower: bower install brickfolio
Or copy the following files into your project:
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