jQuery |行网格插件

jQuery 提供了一个非常简单、用户友好且响应迅速的 rowGrid插件，可帮助程序员以直线显示图像。它非常轻巧并支持无限滚动功能。 rowGrid 的真实示例是出现在直行网格中的 Google+ 图片或 Google 图片搜索。

请下载rowGrid.js插件。在您的工作文件夹中包含所需的文件，如以下示例所示。

注意：所有图像项目应具有相同的高度，但宽度大小可以不同。所有行都与父容器的宽度相匹配。如果一行不够，它会自动将项目缩小到下一行。

示例 1：在以下示例中，图像项列表取自 HTML 容器。所有图像的高度相同，宽度大小不同。 rowGrid()方法在直行网格中显示所有图像项，如输出图像所示。

  

    
    
    
  
    
        
        
        jQuery rowGrid Plugin
  
        
      
        
  
        
            body {
                text-align: center;
                overflow-y: scroll;
            }
              
            .height {
                height: 10px;
            }
              
            .container:after {
                // float not allowed on both sides
                clear: both;
            }
              
            .container:before,
            .container:after {
                content: "";
                // element behave like a table
                display: table;
            }
              
            .item img {
                max-height: 100%;
                max-width: 100%;
                border: 1px solid black;
                border-radius: 25px;
            }
              
            .first-item {
                clear: both;
            }
              
            .item {
                margin-bottom: 15px;
                float: left;
            }
              
            .first-item {
                clear: both;
            }
              
            .last-row,
            .last-row ~ .item {
                // remove bottom margin on last row
                margin-bottom: 0;
            }
        
  
        
            $(document).ready(function() {
  
                $(".container").rowGrid({
                    minMargin: 15,
                    maxMargin: 30,
                    itemSelector: ".item"
  
                });
            });
        
    
  
    
        GeeksforGeeks
         jQuery rowGrid plugin
         
        
  
        
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
            
                
            
        
    
  

输出：

示例2：在下面的示例中，提供了一个按钮，用于在容器布局中从图像路径中动态添加更多图像项以直线显示。 rowGrid插件用于在添加项目时实现垂直滚动。程序员可以根据应用调整图片URL链接。

  

    
    jQuery rowGrid Plugin
    
        body {
            text-align: center;
            overflow-y: scroll;
        }
          
        .container:after {
            clear: both;
        }
          
        .container:before,
        .container:after {
            display: table;
            content: "";
        }
          
        .item.invisible {
            display: none;
        }
          
        .item {
            float: left;
            margin-bottom: 16px;
        }
          
        .item img {
            max-width: 100%;
            vertical-align: bottom;
            max-height: 100%;
        }
          
        @media (max-width: 500px) {
            .item {
                float: none;
                margin-right: auto;
                margin-left: auto;
            }
        }
          
        .first-item {
            clear: both;
        }
          
        .last-row,
        .last-row~.item {
            margin-bottom: 0;
        }
          
        .btnClass {
            padding: 1em;
            margin: 1em;
        }
    
    
    
        var imagecounter = 1;
        var container;
  
        document.addEventListener(
          'DOMContentLoaded', function() {
            container = document.getElementById('container');
  
            var addItemsBtnVar =
                document.querySelector('#addItemsID');
  
            addItemsBtnVar.addEventListener(
              "click", function() {
                addItems();
            });
  
            // Function call to add image items
            addItems();
  
            /* Start jQueryrowGrid.js plugin and its options */
            rowGrid(container, {
                itemSelector: '.item:not(.invisible)',
                minMargin: 15,
                maxMargin: 35,
                // The class of first image item of each row
                firstItemClass: 'first-item',
                // The class of first image item in the last row
                lastRowClass: 'last-row',
                minWidth: 500,
                // Resizing is done for responsive webpages
                resize: true
            });
        });
  
        /* Function to add sample images from the items array  */
        function addItems() {
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                var itemElement = document.createElement('div');
  
                itemElement.className += item.itemClass;
  
                var imgElement = document.createElement('img');
  
                //In the following, please add your own image files path     
                imgElement.src = "images-path/" + imagecounter + ".jpg";
                imgElement.setAttribute('width', item.width);
                imgElement.setAttribute('height', item.height);
  
                itemElement.insertAdjacentElement('afterbegin', imgElement);
                container.insertAdjacentElement('beforeend', itemElement);
  
                imagecounter++;
            }
        };
  
        const items = [{
                width: 220,
                height: 200,
                itemClass: "item"
            }, {
                width: 180,
                height: 200,
                itemClass: "item"
            }, {
                width: 250,
                height: 200,
                itemClass: "item"
            }, {
                width: 200,
                height: 200,
                itemClass: "item"
            }, {
                width: 190,
                height: 200,
                itemClass: "item"
            }, {
                width: 260,
                height: 200,
                itemClass: "item"
            }, {
                width: 220,
                height: 200,
                itemClass: "item"
            }, {
                width: 220,
                height: 200,
                itemClass: "item"
            },
        ];
    

  

     GeeksForGeeks 
    jQuery rowGrid Plugin
    Click the button to add more image items.
  
    
    
    Add items

  

输出：