#jquery masonry

New Post has been published on http://www.htmluse.com/brick-by-brick-js-a-masonry-alternative-page-layout-plugin/

Brick by Brick JS - A Masonry Alternative Page Layout Plugin

Download   Demo

This Jquery Plugin Brick By Brick JS isolates and delivers core Masonry style page layout functionality in the form of a lightweight jQuery plugin.

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="js/layout.js"></script>

2. HTML

The basic HTML markup consists of a container div which needs an ID or Class. The divs within the container will be the items in the layout display. The items don’t need a specific class to enable the layout as the class ‘b-by-b-item’ is automatically added to them when the plugin starts.

<div id="layout"> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> <div>item</div> </div>

3. CSS

Set the Number of Columns at Variable Screen Widths using Media Queries, 100% : 1 Column, 50% : 2 Columns, 33.3% : 3 Columns. This CSS will create a three column layout which will scale down to two and then to one with the screen.

.single-column .b-by-b-item width: 100%!important; @media (min-width: 0px) and (max-width: 480px) #layout .b-by-b-item width: 100%; @media (min-width: 481px) and (max-width: 1024px) #layout .b-by-b-item width: 50%; @media (min-width: 1025px) #layout .b-by-b-item width: 33.33%;

Once the plugin initiates, each of the child divs will be given the class ‘b-by-b-item’. You will then be able to use this class to style the items within the layout:

#layout .b-by-b-item background-color: #ff4500;

4. JAVASCRIPT

The plugin is called on the container selector as in: $(ID or Class).layout();

$('#layout').layout();

There are two options which can be added to the plugin, these both affect the individual items by adding a margin and padding. Both values default at 5px.

$('#layout').layout( itemMargin : 5, itemPadding : 5 );

5. METHODS

addAfter - Append content to the Brick By Brick layout

addAfter([,content]) Type: jQuery object or HTML String

Append content using an array of jQuery objects (to add existing content) or HTML strings (to add content dynamically).

varexistingElems = [$('#existing1'), $('#existing2')], newElems = ['<div id="new-elem">Some content</div>']; $('#layout').layout( 'addAfter' , existingElems ); $('#layout').layout( 'addAfter' , newElems );

addBefore – Prepend content to the Brick By Brick layout

addBefore([,content]) Type: jQuery object or HTML String

Prepend content using an array of jQuery objects (to add existing content) or HTML strings (to add content dynamically).

varexistingElems = [$('#existing1'), $('#existing2')], newElems = ['<div id="new-elem">Some content</div>']; $('#layout').layout( 'addBefore' , existingElems ); $('#layout').layout( 'addBefore' , newElems );

removeItems – Remove content from the Brick by Brick layout and from the DOM

removeItems([,selector], integer) Types: jQuery selector string , integer (default:1000)

Specify items to remove using an array of one or more jQuery selector strings. jQuery objects cannot be used as arguments.

Optionally specify a duration for the fade-out animation.

varelements = ['.remove-items', '#remove-item', 'div[data-attr="Value"]']; $('#layout').layout( 'removeItems' , elements, 2000 );

hideItems – Hide content in the Brick by Brick layout

hideItems([,selector], integer) Types: jQuery selector string , integer (default:1000)

Specify items to hide using an array of one or more jQuery selector strings.

Optionally specify a duration for the fade-out animation.

varelements = ['.hide', '#hide-item', 'div[data-display="hide"]']; $('#layout').layout( 'hideItems' , elements, 2000 );

showItems – Display hidden content in the Brick by Brick layout

showItems([,selector], integer) Types: jQuery selector string ,  integer (default: 1000)

Specify items to display using an array of one or more jQuery selector strings.

Optionally specify a duration for the fade-in animation.

varelements= ['.hidden', '#show-item', 'div[data-display="show"]']; $('#layout').layout( 'showItems' , elements, 3000 );

end – Destroy the Brick by Brick layout

Type: No arguments

Once the end method has been run, the class ‘no-grid’ will be added to the layout selector. For example the div with the ID ‘layout’ will have the class ‘no-grid’ added. This can then be used to style the grid.

$('#end').on('click', function() $('#layout').layout( 'end' ); );

reload – Reinstate the Brick by Brick layout

Type: No arguments