• jQuery Video Tutorials

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

這應該產生以下結果：

點選這裡
列印頁面
上一頁
下一頁
廣告