Pinto是一款轻量级、响应式和可定制的图片网格布局jQuery瀑布流插件。该图片网格布局的特点是使用简单,而且插件本身属于轻量级的,压缩版本小于1kb。该图片网格布局的效果类似于pinterest网站的瀑布流布局,在屏幕缩放时使用CSS3过渡来制作图片的移动效果。它的特点还有:

  • 轻量级:压缩版本小于1kb。
  • 支持自动缩放。
  • 响应式:宽度使用流式布局。
  • 动画效果:缩放屏幕时使用CSS3过渡制作图片移动效果。

使用方法

HTML结构

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

<div id="container">
    <!-- These are our grid blocks -->
    <div><img src="images/01.jpg"><h3>Agfa</h3></div>
    <div><img src="images/02.jpg"><h3>Auto</h3></div>
    ...
</div>              
              
初始化插件

Pinto.js的特点是使用简单。在页面加载完毕之后,可以使用下面的方法来初始化该图片网格布局插件。

<script type="text/javascript">
    $('#container').pinto();
</script>    
              

你也可以通过一些参数来定制该图片网格布局插件。

<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 浏览器尺寸改变和网格布局更新之间的延迟,单位毫秒