当前位置:主页 > 网页特效 > 瀑布流特效 >

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

发布时间:2018/06/03 来源:互联网 浏览: 关键词:jquery 响应式 瀑布流 
jQuery轻量级响应式图片网格布局瀑布流插件 jQuery轻量级响应式图片网格布局瀑布流插件
简要教程

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

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

 使用方法

 HTML结构

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

<divid="container">
    <!-- These are our grid blocks -->
    <div><imgsrc="images/01.jpg"><h3>Agfa</h3></div>
    <div><imgsrc="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 浏览器尺寸改变和网格布局更新之间的延迟,单位毫秒

共有人阅读,期待你的评论!评论
Top