Masonry is another jQuery plugin for a responsive, grid-based layout. It takes its name from positioning elements on a page such as "mason fitting stones in a wall". It represents quite a different approach to what a responsive layout is supposed to look and act like. Instead of scaling fluid columns, it repositions elements to best fit the page width.
It works best with designs based on a square module, but can be applied to other multicolumn setups too. Usually Masonry is used for designs where page building blocks repositioned by the plugin have a fixed size across all screen resolutions. Masonry can be found at http://masonry.desandro.com/. To use it, we only need to link the script jquery.masonry.min.js and initialize the plugin as follows:
<script src="jquery.masonry.min.js"></script>
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
isAnimated: !Modernizr.csstransitions
});
});In the preceding sample Masonry, we will use elements...