当前位置：首页 > 网页特效 > 动画效果

基于Masonry瀑布流的全屏预览图片画廊插件

分类：动画效果日期：2024-05-14 点击(3) 评论(0)

简介

##### 使用方法
该图片画廊插件依赖于jQuery，Masonry，Images Loaded以及一个自定义的Modernizr插件。

```html
<script src="scripts/modernizr-chrg.min.js"></script>
<script src="scripts/imagesloaded.min.js"></script>
<script src="scripts/masonry.min.js"></script>
<script src="scripts/chromagallery.min.js"></script>  
```            
另外还需要引入chromagallery.min.css文件，CSS文件中使用了字体文件，字体文件夹需要放置在合适的路径下。

```html
<link rel="stylesheet" href="stylesheets/chromagallery.min.css">     
```           
#####  HTML结构
该图片画廊的HTML结构非常简单：使用一个<div>元素来包裹所有的图片。

```html
<div class="chroma-gallery mygallery">
    <img src="images/thumbs/1.jpg" alt="Pic 1" data-largesrc="images/1.jpg">
    <img src="images/thumbs/2.jpg" alt="Pic 2" data-largesrc="images/2.jpg">
    <img src="images/thumbs/3.jpg" alt="Pic 3" data-largesrc="images/3.jpg">
    <img src="images/thumbs/4.jpg" alt="Pic 4" data-largesrc="images/4.jpg">
    <img src="images/thumbs/5.jpg" alt="Pic 5" data-largesrc="images/5.jpg">
    <img src="images/thumbs/6.jpg" alt="Pic 6" data-largesrc="images/6.jpg">
    <img src="images/thumbs/7.jpg" alt="Pic 7" data-largesrc="images/7.jpg">
    <img src="images/thumbs/8.jpg" alt="Pic 8" data-largesrc="images/8.jpg">
    <img src="images/thumbs/9.jpg" alt="Pic 9" data-largesrc="images/9.jpg">
    <img src="images/thumbs/10.jpg" alt="Pic 10" data-largesrc="images/10.jpg">
</div> 
```
图片上的alt属性用于指定图片的标题。data-largesrc属性用于指定该图片的高清版本图片的URL位置。

包裹div元素上的chroma-gallery class用于防止图片过早的显示。

#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该图片画廊插件。

```html
<script type="text/javascript">
    $(".mygallery").chromaGallery(};
</script> 
```              
也可以在初始化的时候配置一些参数：

```html
<script type="text/javascript">
    $(".mygallery").chromaGallery
    ({
        color:'#000',
        gridMargin:15,
        maxColumns:5
        dof:true,
        screenOpacity:0.8
    });
</script> 
```               
你可以像下面的样子在代码中调用图片：

```html
<script type="text/javascript">
    $(".mygallery").chromaGallery
    ({
        items:
        [
            {
                alt:'Pic 1',
                largesrc:'images/1.jpg'   
            },
            {
                alt:'Pic 2',
                largesrc:'images/2.jpg'   
            },
            {
                alt:'Pic 3',
                largesrc:'images/3.jpg'   
            },
            {
                alt:'Pic 4',
                largesrc:'images/4.jpg'   
            }
        ]
    });
</script>    
```            
注意：如果你即提供了HTML的图片代码，有提供了一个items参数，那么插件会使用items参数中提供的图片。

#####  配置参数
|  名称 |  默认值 |  描述 |
| ------------ | ------------ | ------------ |
|color|chroma|设置图片画廊的背景色。默认值为“chroma”，它使用图片的主导颜色作为背景色|
|maxColumns|4|网格布局的最大列数|
|items|null|要加载的图片数组|
|dof|false|深度背景效果，对性能有影响|
|screenOpacity|0.98|屏幕的透明度，值在0-1之间|
|lazyLoad|true|是否启用图片懒加载|
|gridMargin|7|网格图片之间的间隔|
|fullscreen|false|是否添加全屏模式|
|easing|easeInOutQuart|设置打开和关闭图片画廊时的easing动画效果|

web299.com

基于Masonry瀑布流的全屏预览图片画廊插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果