Sunday, April 21, 2024
HomejQueryMinimal Responsive Masonry Structure Plugin - jQuery column-sorter.js

Minimal Responsive Masonry Structure Plugin – jQuery column-sorter.js

Masonry structure is a well-liked method to creating vertical rhythms on the net. It arranges parts in rising order from high to backside, and virtually each front-end developer has used or seen it.

This light-weight (lower than 1kb) jQuery plugin lets you simply convert parts with totally different heights in your web page right into a responsive masonry structure that mimics Pinterest’s web page structure. It’s constructed on high of CSS flexbox and can be utilized simply in any form of venture, small or giant, as a fundamental plugin that may match anybody’s wants even with none customization.

See Additionally:

The best way to use it:

1. Load the stylesheet column-sorter.css and JavaScript column-sorter.js within the doc.

<hyperlink 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 objects to the Masonry structure and specify the variety of columns within the data-cols attribute. That is it.

<div class="cols" data-cols="3">
  <div class="merchandise">
    <img src="1.jpg" />
    <h2>Card Merchandise 1</h2>
  <div class="merchandise">
    <img src="2.jpg" />
    <h2>Card Merchandise 2</h2>
  <div class="merchandise">
    <img src="3.jpg" />
    <h2>Card Merchandise 3</h2>

This superior jQuery plugin is developed by thomEpps. For extra Superior Usages, please test the demo web page or go to the official web site.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments