article:
Elements Design: 10 Noise Background
article:
Elements Design: Sign Up invite box - two buttons and welcome note

JS Plugin: BlocksIt - Dynamic Grid Layout jQuery

Advertisement

"BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website."


Implementation

HEAD

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="blocksit.js"></script>

text/javascript

$(document).ready(function() {
   $('#container').BlocksIt({
      numOfCol: 5,
      offsetX: 8,
      offsetY: 8,
      blockElement: '.grid'
   });
});


BODY

Plugin: BlocksIt - Dynamic Grid Layout jQuery

<div id="container">
    <div class="grid class">...</div>
    <div class="grid class2" data-size="2">...</div>
    <div class="grid">...</div>
    <div class="grid class" data-size="3">...</div>
    <div class="grid">...</div>
</div>


Demonstration

1/ Random Dynamic Grid Layout (REFRESH) - ( link )

Plugin: BlocksIt - Dynamic Grid Layout jQuery


2/ Pinterest Dynamic Grid Layout with CSS3 Transitions (RESIZE) - ( link )

Plugin: BlocksIt - Dynamic Grid Layout jQuery


Information

"If the blocks contains of <img> element, be sure to specific the images’ height before calling .BlocksIt()function, else you have to make sure the images are loaded.You could use $(window).load() to make sure everything have loaded into DOM, or use some plugin like waitForImages to check the images status. "



source
download

Advertisement
Tags: plugin, jquery, layout, dynamic, grid, develop, design, images, responsive, resize, web, internet, application, pinterest, css3, html5, transitions, random, head, html, body

Leave a Comment

No Comment

© Creative3x Ltd.