jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Rowgrid.js
jQuery - Rowgrid.js
Rowgrid.js is a jQuery plugin for showing images in a row.
A Simple of rowgrid example as shown below −
<!doctype html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<style>
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.item {
float: left;
margin-bottom: 15px;
}
.item img {
max-width: 100%;
max-height: 100%;
vertical-apgn: bottom;
}
.first-item {
clear: both;
}
.last-row, .last-row ~ .item {
margin-bottom: 0;
}
</style>
<script
src = "https://cdnjs.cloudflare.com/ajax/pbs/jquery/2.0.3/jquery.min.js">
</script>
<script src = "/jquery/src/rowgrid/jquery.row-grid.js">
</script>
<script>
$(document).ready(function(){
$(".container").rowGrid({itemSelector: ".item",
minMargin: 10, maxMargin: 25, firstItemClass: "first-item"});
});
</script>
</head>
<body>
<!-- Items with example images -->
<span class = "container">
<span class = "item">
<img src = "https://www.tutorialspoint.com/images/75-logo.jpg"
width = "220" height = "200" />
</span>
<span class = "item">
<img src =
"https://www.tutorialspoint.com/images/absolute-classes-free.jpg"
width = "180" height = "200" />
</span>
<span class = "item">
<img src = "https://www.tutorialspoint.com/images/absolute-classes-latest-technologies.jpg"
width = "250" height = "200" />
</span>
<span class = "item">
<img src = "https://www.tutorialspoint.com/images/absolute-classes.jpg"
width = "200" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/240/200?5"
width = "240" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/210/200?6"
width = "210" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/260/200?21"
width = "260" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/220/200?22"
width = "220" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/220/200?1"
width = "220" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/180/200?2"
width = "180" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/250/200?3"
width = "250" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/200/200?4"
width = "200" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/240/200?5"
width = "240" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/210/200?6"
width = "210" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/200/200?7"
width = "200" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/190/200?8"
width = "190" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/260/200?9"
width = "260" height = "200" />
</span>
<span class = "item">
<img src = "https://lorempixel.com/220/200?10"
width = "220" height = "200" />
</span>
</span>
</body>
</html>
This should produce following result −
Advertisements