浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery布局 2017-03-23

人气952

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:3.01M

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1882.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery轻量级响应式图片网格布局瀑布流插件

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

点击右侧分享按钮并且进行评论 +10G币(已有0 评论)