当前位置: 首页 > 文档资料 > jQuery 入门教程 >

Rowgrid.js(Rowgrid.js)

优质
小牛编辑
135浏览
2023-12-01

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.xnip.cn/images/75-logo.jpg" 
               width = "220" height = "200" />
         </div>
         <div class = "item">
            <img src = 
               "https://www.xnip.cn/images/absolute-classes-free.jpg" 
               width = "180" height = "200" />
         </div>
         <div class = "item">
            <img src = "https://www.xnip.cn/images/absolute-classes-latest-technologies.jpg" 
               width = "250" height = "200" />
         </div>
         <div class = "item">
            <img src = "https://www.xnip.cn/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>