📌  相关文章
📜  如何使用 HTML、CSS、jQuery 和 Bootstrap 创建响应式图片库?

📅  最后修改于: 2021-08-29 12:26:33             🧑  作者: Mango


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

要实现的特性或功能:

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

先决条件: HTMLCSSJavaScriptjQueryBootstrap 的基本知识。此外,用户应该了解Bootstrap 中的网格系统是如何工作的。

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

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

  • HTML代码:
    
    
    
      
    
      
        
        
        
    
    
        
        
        
            

    GeeksforGeeks

            Responsive image gallery     
        
        
        
            
                         
                           
           

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

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

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

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

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

    • 代码:
      
      
      
        
      
        
          
          
          
      
      
        
      
          
          
          
              

      GeeksforGeeks

              Responsive image gallery     
          
          
          
              
                           
                             
           
    • 输出: