Educational

Rowgrid.js

Written by

Saim Khalid

in

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-align: bottom;}.first-item {
        clear: both;}.last-row,.last-row ~.item {
        margin-bottom:0;}&lt;/style&gt;&lt;script 
     src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script src ="/jquery/src/rowgrid/jquery.row-grid.js"&gt;&lt;/script&gt;&lt;script&gt;$(document).ready(function(){$(".container").rowGrid({itemSelector:".item", 
           minMargin:10, maxMargin:25, firstItemClass:"first-item"});});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;!-- Items with example images --&gt;&lt;div class="container"&gt;&lt;div class="item"&gt;&lt;img src ="https://www.tutorialspoint.com/images/75-logo.jpg" 
           width ="220" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://www.tutorialspoint.com/images/absolute-classes-free.jpg" 
           width ="180" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://www.tutorialspoint.com/images/absolute-classes-latest-technologies.jpg" 
           width ="250" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://www.tutorialspoint.com/images/absolute-classes.jpg" 
           width ="200" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/240/200?5" 
           width ="240" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/210/200?6" 
           width ="210" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/260/200?21" 
           width ="260" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/220/200?22" 
           width ="220" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/220/200?1" 
           width ="220" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/180/200?2" 
           width ="180" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/250/200?3" 
           width ="250" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/200/200?4" 
           width ="200" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/240/200?5" 
           width ="240" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/210/200?6" 
           width ="210" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/200/200?7" 
           width ="200" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/190/200?8" 
           width ="190" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/260/200?9" 
           width ="260" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/220/200?10" 
           width ="220" height ="200"/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

More posts