 |
| Responsive Masonry Minimal Layout With jQuery Plugin |
Masonry layout is a popular approach to creating vertical rhythms on the web. It arranges elements in increasing order from top to bottom, and almost every front-end developer has used or seen it.
This lightweight (less than 1kb) jQuery plugin allows you to easily convert elements with different heights in your page into a responsive masonry layout that mimics Pinterest's page layout. It is built on top of CSS flexbox and can be used easily in any kind of project, small or large, as a basic plugin that will fit anyone's needs even without any customization.
How to use it:
1. Load the stylesheet column-sorter.css and JavaScript column-sorter.js in the document.
<link href="/path/to/column-sorter.css" rel="stylesheet" /> <script src="/path/to/cdn/jquery.slim.min.js"></script> <script src="/path/to/column-sorter.js"></script>
2. Add grid items to the Masonry layout and specify the number of columns in the data-cols attribute. That's it.
<div class="cols" data-cols="3">
<div class="item">
<img src="1.jpg" />
<h2>Card Item 1</h2>
</div>
<div class="item">
<img src="2.jpg" />
<h2>Card Item 2</h2>
</div>
<div class="item">
<img src="3.jpg" />
<h2>Card Item 3</h2>
</div>
...
</div>
Live Demo
See the Pen Isotope - filtering & sorting by Dave DeSandro (@desandro) on CodePen.
File Info
- File Name :
- column-sorter-Production.zip
- Size :
- 1.85KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT