仿Google Photos纯javascript图片画廊插件

material-photo-gallery是一款仿Google Photos纯javascript图片画廊插件。该图片画廊使用Material Design风格，缩略图片以网格进行布局，点击相应的缩略图会弹出全屏大图，并可以在大图预览界面对所有的图片进行预览。

使用方法

该图片画廊插件依赖于David DeSandro的imagesLoaded插件 —— 一款高性能图片预加载插件，和Anh Trinh的Google Image Layout插件 —— 一款用于制作类似于Google Image Search、Flickr Explore和Google Plus Photo Gallery效果的图片网格布局插件。

使用material-photo-gallery图片画廊插件时只需要引入material-photo-gallery.min.js和material-photo-gallery.min.css文件即可。

<link rel="stylesheet" href="material-photo-gallery.css" />
<script src="material-photo-gallery.min.js"></script>                
              

HTML结构

在该图片画廊的HTML结构中，最外层的容器div.m-p-g用于插件的初始化。div.m-p-g__thumbs是网格布局的缩略图层，其中只需要根据你的实际需要设置所有图片的最大高度属性：data-max-height。每一张图片中的data-full属性是链接这张图片的高清大图的URL地址。

<div class="m-p-g">
  <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
    <img src="img/1.jpg" data-full="img/1-big.jpg" class="m-p-g__thumbs-img" />
    <img src="img/2.jpg" data-full="img/2-big.jpg" class="m-p-g__thumbs-img" />
    <img src="img/3.jpg" data-full="img/3-big.jpg" class="m-p-g__thumbs-img" />
    <img src="img/4.jpg" data-full="img/4-big.jpg" class="m-p-g__thumbs-img" />
    <img src="img/5.jpg" data-full="img/5-big.jpg" class="m-p-g__thumbs-img" />
    <img src="img/6.jpg" data-full="img/6-big.jpg" class="m-p-g__thumbs-img" />
    <img src="img/7.jpg" data-full="img/7-big.jpg" class="m-p-g__thumbs-img" />
    <img src="img/8.jpg" data-full="img/8-big.jpg" class="m-p-g__thumbs-img" />
  </div>

  <div class="m-p-g__fullscreen"></div>
</div>        
              

初始化插件

在完成了相关资源文件的引入和HTML结构的编写之后，可以通过下面的方法来初始化该图片画廊插件。

// 选择图片画廊元素
var elem = document.querySelector('.m-p-g');

// 初始化图片画廊
var gallery = new Gallery(elem);