jQuery - Rowgrid.js

Previous
Quiz
Next

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="/?originalUrl=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fjquery%2F2.0.3%2Fjquery.min.js">
      </script>
      <script src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fjquery%2Fsrc%2Frowgrid%2Fjquery.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="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fimages%2F75-logo.jpg" 
               width = "220" height = "200" />
         </div>
			
         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fimages%2Fabsolute-classes-free.jpg" 
               width = "180" height = "200" />
         </div>
			
         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fimages%2Fabsolute-classes-latest-technologies.jpg" 
               width = "250" height = "200" />
         </div>
			
         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Fwww.tutorialspoint.com%2Fimages%2Fabsolute-classes.jpg" 
               width = "200" height = "200" />
         </div>
			
         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F240%2F200%3F5" 
               width = "240" height = "200" />
         </div>
			
         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F210%2F200%3F6" 
               width = "210" height = "200" />
         </div>
			
         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F260%2F200%3F21" 
               width = "260" height = "200" />
         </div>
			
         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F220%2F200%3F22" 
               width = "220" height = "200" />
         </div>
			
         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F220%2F200%3F1" 
               width = "220" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F180%2F200%3F2" 
               width = "180" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F250%2F200%3F3" 
               width = "250" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F200%2F200%3F4" 
               width = "200" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F240%2F200%3F5" 
               width = "240" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F210%2F200%3F6" 
               width = "210" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F200%2F200%3F7" 
               width = "200" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F190%2F200%3F8" 
               width = "190" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F260%2F200%3F9" 
               width = "260" height = "200" />
         </div>

         <div class = "item">
            <img src="/?originalUrl=https%3A%2F%2Florempixel.com%2F220%2F200%3F10" 
               width = "220" height = "200" />
         </div> 

      </div>
   </body>
</html>

This should produce following result −

Click here
Print Page
Previous
Next
Advertisements