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: