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

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>                
              

配置参数

下面是该图片网格布局插件的所有可用参数。