Jquery 简明教程

jQuery - Rowgrid.js

Rowgrid.js 是一款 jQuery 插件，用于以行形式显示图像。

Rowgrid.js is a jQuery plugin for showing images in a row.

Rowgrid 示例如下所示：

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>

这将产生以下结果 −

This should produce following result −