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-align: bottom;

         }

                                    

         .first-item {

            clear: both;

         }

                                    

         .last-row, .last-row ~ .item {

            margin-bottom: 0;

         }

      </style>

                       

      <script

         src = "http://cdnjs.cloudflare.com/ajax/libs/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 -->

                       

      <div class = "container">

                       

         <div class = "item">

            <img src = "http://www.tutorialspoint.com/images/75-logo.jpg"

               width = "220" height = "200" />

         </div>

                                    

         <div class = "item">

            <img src = "http://www.tutorialspoint.com/images/absolute-classes-free.jpg"

               width = "180" height = "200" />

         </div>

                                    

         <div class = "item">

            <img src = "http://www.tutorialspoint.com/images/absolute-classes-latest-technologies.jpg"

               width = "250" height = "200" />

         </div>

                                    

         <div class = "item">

            <img src = "http://www.tutorialspoint.com/images/absolute-classes.jpg"

               width = "200" height = "200" />

         </div>

                                    

         <div class = "item">

            <img src = "http://lorempixel.com/240/200?5" width = "240" height = "200" />

         </div>

                                    

         <div class = "item">

            <img src = "http://lorempixel.com/210/200?6" width="210" height="200" />

         </div>

                                    

         <div class = "item">

            <img src = "http://lorempixel.com/260/200?21" width = "260" height = "200" />

         </div>

                                    

         <div class = "item">

            <img src = "http://lorempixel.com/220/200?22" width = "220" height = "200" />

         </div>

                                    

         <div class = "item">

            <img src = "http://lorempixel.com/220/200?1" width = "220" height = "200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/180/200?2" width = "180" height = "200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/250/200?3" width = "250" height = "200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/200/200?4" width = "200" height = "200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/240/200?5" width = "240" height = "200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/210/200?6" width = "210" height = "200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/200/200?7" width = "200" height = "200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/190/200?8" width="190" height = "200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/260/200?9" width = "260" height="200" />

         </div>

 

         <div class = "item">

            <img src = "http://lorempixel.com/220/200?10" width = "220" height = "200" />

         </div>

 

      </div>

                       

   </body>

           

</html>