placing items in straight rows with jQuery plugin

Home Image Effectsplacing items in straight rows with jQuery plugin

placing items in straight rows with jQuery plugin

5 years ago Views

20411

2563

brunjo

placing items in straight rows with jQuery plugin

This is A small, lightweight jQuery plugin for placing items in straight rows.

Installation

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

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;
}

Tag: image gallery