Minimal jQuery Grid Layout with Endless Scrolling Support - RowGrid.js

Minimal jQuery Grid Layout with Endless Scrolling Support - RowGrid.js
File Size: 8.52 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

RowGrid.js is a very simple and easy-to-use jQuery plugin to set Html elements into a responsive grid with infinite scrolling support.

How to use it:

1. Include the jQuery library and jQuery RowGrid.js script in the Html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.row-grid.js"></script>

2. Wrap the Html elements in a container.

<div class="container">
<div class="item"> Item 1 </div>
<div class="item"> Item 2 </div>
<div class="item"> Item 3 </div>
...
</div>

3. The CSS styles to clear the floats.

<style>
.container:before,  .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.item {
float: left;
margin-bottom: 15px;
}
.first-item {
clear: both;
}
.last-row, .last-row ~ .item {
margin-bottom: 0;
}
</style>

4. Call the plugin on the container with optional settings.

<script>
$(document).ready(function(){
$(".container").rowGrid({
itemSelector: ".item", 
minMargin: 10, 
maxMargin: 25,
resize: true,
firstItemClass: "first-item",
lastRowClass: 'last-row'
});
});
</script>

5. Add endless scrolling support.

$(document).ready(function() {
var options = {
itemSelector: ".item", 
minMargin: 10, 
maxMargin: 25,
resize: true,
firstItemClass: "first-item",
lastRowClass: 'last-row'
};
$(".container").rowGrid(options);
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
$(".container").append("<div class='item'><img src='path/to/image' width='' height='' /></div>");
$(".container").rowGrid("appended");
}
});
)};

Changelog:

2018-06-26

  • Add resize listener only once when rowGrid is called multiple times
  • Currently works as a PURE JavaScript plugin.

2017-12-19

  • fix minWidth bug

2017-11-21

  • fix last-item class

2017-09-10

  • v1.0.6: define $this variable

2016-01-27

  • v1.0.5: Fix for fractional container width rounding

2015-10-18

  • v1.0.4

2014-11-12

  • set width/height attribute if not available

2014-11-02

  • fixed: Sometimes need to refresh the page to see the effect

2014-09-01

  • fix bug in >=IE10

2014-08-05

  • support IE8 

2014-07-28

  • improve rowGrid.js

2014-05-26

  • fix problem with percentage width container.

2014-03-13

  • fix problem with infite scrolling

2014-03-12

  • scope resize event

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