Responsive Grid Layout With Pagination - jQuery Hip.js

Hip.js is a tiny and CSS-less jQuery plugin to help developers generate a responsive grid layout with pagination & filter controls.

Great for content-heavy web layouts (e.g. portfolio, photo gallery, etc) to paginate and filer through long/large grid items on the client-side.

You can specify the number of grid items to show per page as well as the number of grid items to show per row.

The fully responsive grid layout is based on the CSS Grid Layout system so the plugin works on modern browsers which support the grid layout properties.

How to use it:

1. Add grid items to the grid layout.

<div id="example" class="hip-grid">
  <div class="hip-item">
    Content 1
  </div>
  <div class="hip-item">
    Content 2
  </div>
  <div class="hip-item">
    Content 3
  </div>
  <div class="hip-item">
    Content 4
  </div>
  <div class="hip-item">
    Content 5
  </div>
  ...
</div>

2. Load both jQuery library and the Hip.js script in the document.

<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/lib/hip.js"></script>

3. Call the function on the top container to convert the long content group into several pages based on the itemsPerPage you specify during init (Default: 12).

$("#example").hip({
  itemsPerPage: 10
});

4. Specify the number of items to show per row. Default: 4.

$("#example").hip({
  itemsPerRow: 3
});

5. Set the padding of grid items. Default: '7.5px'.

$("#example").hip({
  itemGaps: '10px'
});

6. Set the height of grid items. Default: 'auto'.

$("#example").hip({
  itemHeight: '200px'
});

7. Set the text-align of the pagination. Default: 'center'.

$("#example").hip({
  paginationPos:'left'
});

8. Activate & config the live filter functionality.

$("#example").hip({
  filter: true,
  filterPos: "center",
  filterText: "Search"
});

Changelog:

2019-12-06

• Fixed filter

---

This awesome jQuery plugin is developed by llxx-lord-xxll. For more Advanced Usages, please check the demo page or visit the official website.