RowGrid.js Demos

Installation

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.row-grid.min.js"></script>

Simple Example

Responsive: Resize your browser.

HTML:

<div class="container">
  <div class="item">
    <img src="path/to/image" width="120" height="100" />
  </div>
  <div class="item">
    <img src="path/to/image" width="130" height="100" />
  </div>
  ...
</div>

CSS:

.container {
  background: #eee;
}
/* clearfix */
.container:before,
.container:after {
    content: "";
    display: table;
}
.container:after {
    clear: both;
}

.item {
  float: left;
  margin-bottom: 10px; 
}
.item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}
.first-item {
  clear: both;
}
/* remove margin bottom on last row */
.last-row, .last-row ~ .item {
  margin-bottom: 0;
}

JS:

$(document).ready(function() {
  var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
  $(".container").rowGrid(options);
});

Endless Scrolling

JS:

$(document).ready(function() {
  var options = {minMargin: 5, maxMargin: 15, itemSelector: ".item", firstItemClass: "first-item"};
  $(".container").rowGrid(options);

  // endless scrolling
  $(window).scroll(function() {
     if($(window).scrollTop() + $(window).height() == $(document).height()) {
        $(".container").append("<div class='item'><img src='path/to/image' width='140' height='100' /></div>");
        $(".container").rowGrid("appended");
     }
  });
});