MASONRY.JS – RESPONSIVE TILED GRID LAYOUT

Masonry.js is an ultra-light (~1kb minified) jQuery plugin used to create responsive, cross-platform, tiled gallery/grid similar to the Masonry library.

HOW TO USE IT:

1. Just include the jQuery Masonry.js script after loading jQuery library and we’re ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/masonry.js"></script>

2. Load the Tuupola’s lazy load plugin for image lazy loading (OPTIONAL).

<script src="jquery.lazyload.js"></script>

3. Add a group of images to the Masonry layout.

<div id="masonry">
  <a href="1.jpg">
    <img src="1.jpg">
  </a>
  <a href="2.jpg">
    <img src="2.jpg">
  </a>
  <a href="3.jpg">
    <img src="3.jpg">
  </a>
</div>

4. Integrate with Tuupola’s image lazy load plugin.

<div id="masonry">
  <a href="1.jpg">
    <img class="lazyload" data-original="1.jpg">
  </a>
  <a href="2.jpg">
    <img class="lazyload" data-original="2.jpg">
  </a>
  <a href="3.jpg">
    <img class="lazyload" data-original="3.jpg">
  </a>
</div>

5. Initialize the plugin with default options.

$('div#masonry').masonry();

6. All configuration options.

$('div#masonry').masonry({
  // meant for supporting lazy-loading more items
  startOffset: 0, 
  // minimum aspect ratio
  rowMinAspectRatio: 3.5
  
});

Demo     Download

MASONRY.JS – RESPONSIVE TILED GRID LAYOUT

| CSS3, HTML5, Javascript, jQuery Plugins, Slider | 0 Comments
About The Author
- Thank you for visiting my profile page. I have over 8+ years experience in web development. Product quality, Client service, and results are my priority. I offer unparalleled expertise and services in web design and front-end development, including responsive websites (Using Twitter bootstrap framework) and Hybrid Mobile Application (Using IONIC Framework) . I am proficient in a wide spectrum of technologies and learn new ones fast. I am seeking new opportunities to design, build and extend websites and web applications.