当前位置：首页 > 网页特效 > 其他

jQuery轻量级响应式图片网格布局瀑布流插件

分类：其他日期：2024-05-14 点击(4) 评论(0)

简介

##### HTML结构
该图片网格布局使用嵌套div的HTML结构。

```html
<div id="container">
    
    <div><img src="images/01.jpg"><h3>Agfa</h3></div>
    <div><img src="images/02.jpg"><h3>Auto</h3></div>
    ...
</div>    
```          
#####  初始化插件
Pinto.js的特点是使用简单。在页面加载完毕之后，可以使用下面的方法来初始化该图片网格布局插件。

```html
<script type="text/javascript">
    $('#container').pinto();
</script>   
``` 
你也可以通过一些参数来定制该图片网格布局插件。

```html
<script type="text/javascript">
    $('#container').pinto({
        itemSelector: '.block',
        itemWidth: 200,         
        marginX: 10,                
        marginY: 10,                
        align: 'center',                
        fitWidth: false,                
        animate: true,               
        autoResize: true,           
        resizeDelay: 50
    });
</script>  
```              
#####  配置参数
下面是该图片网格布局插件的所有可用参数。

| 参数  |默认值   | 描述  |
| ------------ | ------------ | ------------ |
|itemSelector|'< div'|块级元素的标识符|
|itemWidth|220|网格元素的宽度，单位像素|
|marginX|10|两个网格之间的水平间距|
|marginY|10|两个网格之间的垂直间距|
|align|'left'|网格的对齐方式：'left', 'right' 或 'center'|
|fitWidth|true|根据容器的尺寸来调整网格的宽度，以创建最优的布局效果|
|animate|true|在更新网格布局是使用使用CSS动画效果|
|autoResize|true|在浏览器尺寸改变的时候是否更新网格布局|
|resizeDelay|50|浏览器尺寸改变和网格布局更新之间的延迟，单位毫秒|

web299.com

jQuery轻量级响应式图片网格布局瀑布流插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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