New Post has been published on Html Use
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
$('#reload').on('click', function() $('#layout').layout( 'reload' ); );










