基于Bootstrap3的响应式网格图片画廊插件

当前位置:主页 > jQuery库 > 布局和界面 > 基于Bootstrap3的响应式网格图片画廊插件
基于Bootstrap3的响应式网格图片画廊插件
分享:

    插件介绍

    bootstrap-photo-gallery是一款基于Bootstrap3.x的响应式网格图片画廊插件。该图片画廊插件使用Bootstrap的网格系统来布局,采用jQuery来触发模态窗口显示相应的大图,并且支持不同高度的图片说明文本。

    浏览器兼容性

    浏览器兼容性
    时间:2015-11-04
    阅读:
简要教程

bootstrap-photo-gallery是一款基于Bootstrap3.x的响应式网格图片画廊插件。该图片画廊插件使用Bootstrap的网格系统来布局,采用jQuery来触发模态窗口显示相应的大图,并且支持不同高度的图片说明文本。

使用方法

使用该图片画廊插件需要引入jQuery、Bootstrap相关文件和photo-gallery.js文件。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="js/jQuery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/photo-gallery.js"></script>                
              
HTML结构

该网格布局依赖于Bootstrap的网格系统,在每一个列表项中,都要为其添加class col-lg-2col-md-2col-sm-3col-xs-4,表明网格在大屏幕上占2列,小屏幕中占3列,超小屏幕中占4列。

<div class="container">
  <ul class="row">
    <li class="col-lg-2 col-md-2 col-sm-3 col-xs-4 col-xxs-12">
        <img class="img-responsive" src="images/1.jpg">
        <div class="text">......</div>
    </li>
    ......
  </ul>
</div>
              

经过上面的代码处理后,得到下面的结果:

Bootstrap图片画廊

不同高度图片的处理

由于图片上的说明文字各不相同,这会照成图片的高度不一致,该插件的解决办法是使同一行的所有图片的高度保存一致,它的高度等于改行最高的图片的高度。

假如你使用的是col-lg-2,意思是一行有6列,那么在第6张图片的后面,就需要添加下面的代码:

<li class="clearfix visible-lg-block"></li>                
              

关于该插件更详细的信息请参考:https://github.com/michaelsoriano/bootstrap-photo-gallery