jQuery | RowGrid Plugin

jQuery provides a very simple, user-friendly and responsive rowGrid plugin that helps programmers to display images in a straight row. It is very lighweighted and supports infinite scrolling feature. Real examples of rowGrid are Google+ images or Google image search that appears in a straight row grid.

Please download the rowGrid.js plugin. Include the required files in your working folder as shown in the following examples.

Note: All image items should have the same height but can differ in width size. All the rows matches the width of the parent container. If one row is not enough, it automatically scales the items down to the next row.

Example 1: In the following example, list of image items are taken in HTML container. The height of all the images are same with varied width sizes. The rowGrid() method displays all the image items in straight row grid as shown in the output image.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <!doctype html>
    <html lang="en">
  
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, initial-scale=1">
        <title>jQuery rowGrid Plugin</title>
  
        <script src=
      </script>
        <script src="jquery.row-grid.js"></script>
  
        <style>
            body {
                text-align: center;
                overflow-y: scroll;
            }
              
            .height {
                height: 10px;
            }
              
            .container:after {
                // float not allowed on both sides
                clear: both;
            }
              
            .container:before,
            .container:after {
                content: "";
                // element behave like a table
                display: table;
            }
              
            .item img {
                max-height: 100%;
                max-width: 100%;
                border: 1px solid black;
                border-radius: 25px;
            }
              
            .first-item {
                clear: both;
            }
              
            .item {
                margin-bottom: 15px;
                float: left;
            }
              
            .first-item {
                clear: both;
            }
              
            .last-row,
            .last-row ~ .item {
                // remove bottom margin on last row
                margin-bottom: 0;
            }
        </style>
  
        <script>
            $(document).ready(function() {
  
                $(".container").rowGrid({
                    minMargin: 15,
                    maxMargin: 30,
                    itemSelector: ".item"
  
                });
            });
        </script>
    </head>
  
    <body>
        <h1 style="color:green">GeeksforGeeks</h1>
        <b> jQuery rowGrid plugin</b>
        <div class="height"> </div>
        <br>
  
        <div class="container">
            <div class="item">
                <img src="images/background1.jpg"
                     width="200" height="200" />
            </div>
            <div class="item">
                <img src="images/background2.jpg" 
                     width="220" height="200" />
            </div>
            <div class="item">
                <img src="images/background3.jpg"
                     width="210" height="200" />
            </div>
            <div class="item">
                <img src="images/bgImage1.jpg"
                     width="220" height="200" />
            </div>
            <div class="item">
                <img src="images/bgImage2.jpg" 
                     width="200" height="200" />
            </div>
            <div class="item">
                <img src="images/bgImage3.jpg" 
                     width="200" height="200" />
            </div>
            <div class="item">
                <img src="images/geeksImage1.png" 
                     width="210" height="200" />
            </div>
            <div class="item">
                <img src="images/geeksImage2.png"
                     width="220" height="200" />
            </div>
            <div class="item">
                <img src="images/geeksImage3.png"
                     width="260" height="200" />
            </div>
            <div class="item">
                <img src="images/geeksImage4.png"
                     width="200" height="200" />
            </div>
            <div class="item">
                <img src="images/geeksimage5.png"
                     width="200" height="200" />
            </div>
            <div class="item">
                <img src="images/geeksimage6.png" 
                     width="200" height="200" />
            </div>
        </div>
    </body>
  
</html>

chevron_right


Output:

Example 2: In the following example, a button is provided to dynamically add more image items in the container layout from image path to display in a straight row. The rowGrid plugin is used to implement vertical scrolling as and when the items are added. The programmer can adjust the image URL link according to the application.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <title>jQuery rowGrid Plugin</title>
    <style>
        body {
            text-align: center;
            overflow-y: scroll;
        }
          
        .container:after {
            clear: both;
        }
          
        .container:before,
        .container:after {
            display: table;
            content: "";
        }
          
        .item.invisible {
            display: none;
        }
          
        .item {
            float: left;
            margin-bottom: 16px;
        }
          
        .item img {
            max-width: 100%;
            vertical-align: bottom;
            max-height: 100%;
        }
          
        @media (max-width: 500px) {
            .item {
                float: none;
                margin-right: auto;
                margin-left: auto;
            }
        }
          
        .first-item {
            clear: both;
        }
          
        .last-row,
        .last-row~.item {
            margin-bottom: 0;
        }
          
        .btnClass {
            padding: 1em;
            margin: 1em;
        }
    </style>
    <script src="jquery.row-grid.js"></script>
    <script>
        var imagecounter = 1;
        var container;
  
        document.addEventListener(
          'DOMContentLoaded', function() {
            container = document.getElementById('container');
  
            var addItemsBtnVar =
                document.querySelector('#addItemsID');
  
            addItemsBtnVar.addEventListener(
              "click", function() {
                addItems();
            });
  
            // Function call to add image items
            addItems();
  
            /* Start jQueryrowGrid.js plugin and its options */
            rowGrid(container, {
                itemSelector: '.item:not(.invisible)',
                minMargin: 15,
                maxMargin: 35,
                // The class of first image item of each row
                firstItemClass: 'first-item',
                // The class of first image item in the last row
                lastRowClass: 'last-row',
                minWidth: 500,
                // Resizing is done for responsive webpages
                resize: true
            });
        });
  
        /* Function to add sample images from the items array  */
        function addItems() {
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                var itemElement = document.createElement('div');
  
                itemElement.className += item.itemClass;
  
                var imgElement = document.createElement('img');
  
                //In the following, please add your own image files path     
                imgElement.src = "images-path/" + imagecounter + ".jpg";
                imgElement.setAttribute('width', item.width);
                imgElement.setAttribute('height', item.height);
  
                itemElement.insertAdjacentElement('afterbegin', imgElement);
                container.insertAdjacentElement('beforeend', itemElement);
  
                imagecounter++;
            }
        };
  
        const items = [{
                width: 220,
                height: 200,
                itemClass: "item"
            }, {
                width: 180,
                height: 200,
                itemClass: "item"
            }, {
                width: 250,
                height: 200,
                itemClass: "item"
            }, {
                width: 200,
                height: 200,
                itemClass: "item"
            }, {
                width: 190,
                height: 200,
                itemClass: "item"
            }, {
                width: 260,
                height: 200,
                itemClass: "item"
            }, {
                width: 220,
                height: 200,
                itemClass: "item"
            }, {
                width: 220,
                height: 200,
                itemClass: "item"
            },
        ];
    </script>
</head>
  
<body>
    <h1 style="color:green"> GeeksForGeeks </h1>
    <b>jQuery rowGrid Plugin</b>
    <p>Click the button to add more image items.</p>
  
    <div id="container" class="container">
    </div>
    <button class=".btnClass" id="addItemsID">Add items</button>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.