jQuery-Rowgrid.js

Rowgrid.jsは、画像を連続して表示するためのjQueryプラグインです。
以下に示すような単純なrowgridの例-
<!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.finddevguides.com/images/75-logo.jpg"
               width = "220" height = "200"/>
         </div>

         <div class = "item">
            <img src =
               "https://www.finddevguides.com/images/absolute-classes-free.jpg"
               width = "180" height = "200"/>
         </div>

         <div class = "item">
            <img src = "https://www.finddevguides.com/images/absolute-classes-latest-technologies.jpg"
               width = "250" height = "200"/>
         </div>

         <div class = "item">
            <img src = "https://www.finddevguides.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>
これは、次の結果を生成する必要があります-
リンク：/jquery/src/rowgrid/index [ここをクリック]
Jquery-rowgrid

jQuery-Rowgrid.js
