jQuery RowGrid Plugin (original) (raw)

Last Updated : 29 Jul, 2024

jQuery provides a very simple, user-friendly and responsive **rowGrid plugin that helps programmers to display images in a straight row. It is very lightweighted 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.

html `

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <title>jQuery rowGrid Plugin</title>

    <script src=

"" title="undefined" rel="noopener noreferrer">http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js">

    <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 {
            /* 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>

**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.

html `

jQuery rowGrid Plugin