如何使用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();
          });
      
    
      

  • 输出：