如何使用 HTML、CSS、jQuery 和 Bootstrap 创建响应式图片库？

随着 Web 技术中新框架的出现，设计和实现功能丰富且响应迅速的网页变得非常容易。在这里，我们将使用 HTML、CSS、jQuery 和 Bootstrap 设计一个响应式图片库。

要实现的特性或功能：

• 响应式图片
• 响应式网格系统
• 图像查看器

先决条件： HTML 、 CSS 、 JavaScript 、 jQuery和Bootstrap 的基本知识。此外，用户应该了解Bootstrap 中的网格系统是如何工作的。

在第一部分中，我们将完整的解决方案分为三个不同的部分，我们将为画廊创建结构。在第二部分中，我们将使用 CSS 设计图库。并且在最后一节中将使其可用于响应用户的交互。

创建结构：初始化 HTML 布局和响应式图像，但我们将通过 jQuery 以数组格式附加图像。

• HTML代码：

    
  
    
      
      
      
      
      
  
  
      
      
      
          GeeksforGeeks
          Responsive image gallery
      
      
      
      
          
              
                  
                  
              
          
    
          
          
              
    
                  
                  
                      
                          
                            ×
                          
    
                      
                      
                      
                      
                             
                      
                  
              
        
    
      
  
    

  设计结构：我们将根据项目的要求添加 CSS 属性。

  • CSS 代码：

  • 引导代码：我们将使用引导模式作为图像查看器，并根据我们的要求对其进行相应修改。我们将渲染所有不必要的模态组件透明。请记住，我们在模态中附加图像，因此我们需要使用on() 方法为此类选择器附加功能。

  响应部分：在本部分中，我们将附加响应式图库的所有图像，使它们能够响应用户。下面是我们将用于在图库中显示图像的网格排列。由于类使用col-sm-6 col-md-2 。逻辑是中屏断点2格，大断点6格。每当内容重叠时，它们也会进一步划分，从而呈现为单个网格。

  • jQuery 代码：以下是以这种方式追加的脚本。我们假设我们从服务器获取图像（作为 JavaScript 中的图像 URL 数组）。现在我们将相应地在页面的内容面板中附加图像。下面是相同的实现

                    
          // Taking Array of Image Addresses 
          // Suppose it as information from the server
          // Modify this for different address
          a = [
    'https://www.geeksforgeeks.org/wp-content/uploads/javascript.png',
    'https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png',
    'https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png',
    'https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png',
    'https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png',
    'https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'
          ];
          var x = 0;
          for (var i = 0; x < a.length; i++) {
              var append = "<div class='row'>";
              for (var j = 0; j < 6 && x < a.length; j++) {
                  append += `
          <div class="contain col-sm-6 col-md-2">
            <img class="img-responsive" src=` + a[x++] + `>
          </div>
          `;
              }
              append += '</div>';
              appender(append);
          }
      
          // Function to append the data
          function appender(x) {
              $('#gallery').html(function(i, original_html) {
                  return (original_html + x);
              });
          }
      
          // For Image Modal
          $(document).on('click', 'img', function() {
              imgAddr = $(this).attr('src');
              data = "<center><img src=" + imgAddr + " width='50%'>";
              $('#myModal').find('.modal-body').html(data);
              $('#myModal').modal();
          });
      

  最终解决方案：这是以上三段的组合，这就是完整的响应式图库代码。

  • 代码：

      
    
      
        
        
        
        
        
    
    
        
        img {
            border-radius: 8px;
        }
          
        .container-fluid {
            margin-left: 12px;
            margin-right: 12px
        }
          
        .contain {
            padding-top: 8px;
            padding-bottom: 8px;
        }
        
        /* For overriding box-shadow and other default
           effects of modal and it's children */
        .modal,
        .modal-content,
        .modal-header,
        .modal-footer {
            background-color: transparent;
            border: 0px;
            color: white;
            
            /* Disable box shadow for different browsers */
            -webkit-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
            -moz-box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
            box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 1);
        }
          
        .modal-dialog {
            width: 100%;
            height: 50%;
            margin-top: 8px;
        }
          
        .close {
            color: white;
            opacity: 0.8;
        }
          
        .modal-body {
            height: 75%;
        }
    
      
    
        
        
        
            GeeksforGeeks
            Responsive image gallery
        
        
        
        
            
                
                    
                    
                
            
      
            
            
                
      
                    
                    
                        
                            
                              ×
                            
      
                        
                        
                        
                        
                               
                        
                    
                
          
      
      
                    
          // Taking Array of Image Addresses 
          // Suppose it as information from the server
          // Modify this for different address
          a = [
    'https://www.geeksforgeeks.org/wp-content/uploads/javascript.png',
    'https://www.geeksforgeeks.org/wp-content/uploads/jquery-banner.png',
    'https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png',
    'https://www.geeksforgeeks.org/wp-content/uploads/CSS-768x256.png',
    'https://www.geeksforgeeks.org/wp-content/uploads/php-1-768x256.png',
    'https://media.geeksforgeeks.org/wp-content/uploads/20200130114942/bootstrap4.png'
          ];
          var x = 0;
          for (var i = 0; x < a.length; i++) {
              var append = "<div class='row'>";
              for (var j = 0; j < 6 && x < a.length; j++) {
                  append += `
          <div class="contain col-sm-6 col-md-2">
              <img class="img-responsive" src=` + a[x++] + `>
          </div>
          `;
              }
              append += '</div>';
              appender(append);
          }
      
          // Function to append the data
          function appender(x) {
              $('#gallery').html(function(i, original_html) {
                  return (original_html + x);
              });
          }
      
          // For Image Modal
          $(document).on('click', 'img', function() {
              imgAddr = $(this).attr('src');
              data = "<center><img src=" + imgAddr + " width='50%'>";
              $('#myModal').find('.modal-body').html(data);
              $('#myModal').modal();
          });
      
    
      

  • 输出：