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 = "https://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 = "https://www.tutorialspoint.com/images/75-logo.jpg" width = "220" height = "200" /> </div> <div class = "item"> <img src = "https://www.tutorialspoint.com/images/absolute-classes-free.jpg" width = "180" height = "200" /> </div> <div class = "item"> <img src = "https://www.tutorialspoint.com/images/absolute-classes-latest-technologies.jpg" width = "250" height = "200" /> </div> <div class = "item"> <img src = "https://www.tutorialspoint.com/images/absolute-classes.jpg" width = "200" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/240/200?5" width = "240" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/210/200?6" width = "210" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/260/200?21" width = "260" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/220/200?22" width = "220" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/220/200?1" width = "220" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/180/200?2" width = "180" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/250/200?3" width = "250" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/200/200?4" width = "200" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/240/200?5" width = "240" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/210/200?6" width = "210" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/200/200?7" width = "200" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/190/200?8" width = "190" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/260/200?9" width = "260" height = "200" /> </div> <div class = "item"> <img src = "https://lorempixel.com/220/200?10" width = "220" height = "200" /> </div> </div> </body> </html>
Leave a Reply